【html/CSS】tableの幅を自動調整する方法としない方法
「tableの幅を自動調整したい!」
「tableの幅を自動調整しないでほしい!」
tableの幅を自動調整する方法としない方法を解説します。
【自動調整する】width:auto
tableの幅を自動調整するには「width:auto」を指定します。
自動調整にすると内容量に応じた横幅になります。
なお「width:auto」は初期値であるため、指定しなくても自動調整状態になっています。
セルセルセル1 | セル2 |
セル3 | セルセル4 |
<style>
.example{
width: auto;
}
</style>
<table class="example" border="1">
<tr>
<td>セルセルセル1</td><td>セル2</td>
</tr>
<tr>
<td>セル3</td><td>セルセル4</td>
</tr>
</table>
【自動調整しない】width:○px
tableの幅を自動調整しない、つまり固定するには「width:○px」を指定します。
○には任意の数値が入ります。
px指定すると内容量に関わらず横幅が固定されます。
セルセルセル1 | セル2 |
セル3 | セルセル4 |
<style>
.example2{
width: 200px;
}
</style>
<table class="example2" border="1">
<tr>
<td>セルセルセル1</td><td>セル2</td>
</tr>
<tr>
<td>セル3</td><td>セルセル4</td>
</tr>
</table>
固定ではありませんが、%で指定することもできます。
%指定すると親の幅に応じた幅になります。レスポンシブ対応では必須の単位です。
セルセルセル1 | セル2 |
セル3 | セルセル4 |
<style>
.example3{
width: 50%;
}
</style>
<table class="example3" border="1">
<tr>
<td>セルセルセル1</td><td>セル2</td>
</tr>
<tr>
<td>セル3</td><td>セルセル4</td>
</tr>
</table>
まとめ
tableの幅を自動調整するには「width:auto」を指定。
tableの幅を自動調整しない、つまり固定するには「width:○px」を指定。
%指定すると親の幅に応じた幅になる。
以上、tableの幅を自動調整する方法としない方法でした。