【html/CSS】tableの幅を自動調整する方法としない方法

「tableの幅を自動調整したい！」

「tableの幅を自動調整しないでほしい！」

tableの幅を自動調整する方法としない方法を解説します。

【自動調整する】width:auto
【自動調整しない】width:○px
まとめ

【自動調整する】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>