2022-08-09

CSS: table（テーブル）の列幅の割合を指定する

CSS で table（テーブル）の列幅の割合 （パーセンテージや実数値）を指定するには table-layout プロパティを使用します。

table-layout プロパティの値は auto（自動レイアウト）と fixed（固定レイアウト）があり、 fixed を指定した場合は、1行目に指定された列幅の割合や実数値をテーブル全体に適用します。

列幅の割合を指定するサンプル

次のテーブルは、３つの列があり、テーブル全体を「width: 100%」、列幅を左から30%、40%、40% に指定しています。

<table>
<tr><th class="width30">ヘッダ 30</th><th class="width40">ヘッダ 40</th><th class="width40">ヘッダ 40</th></tr>
<tr><td>データ</td><td>データ</td><td>データ</td></tr>
<tr><td>データ</td><td>データ</td><td>データ</td></tr>
<tr><td>データ</td><td>データ</td><td>データ</td></tr>
</table>

<style>
    table, th, td {
        border: 1px solid black;  
    }
    table {
        table-layout: fixed;
        width: 100%;
    }
    
    th.width30 {
        width: 30%;
    }
    
    th.width40 {
        width: 40%;
    }
</style>

赤字部分がポイントとなる所です。

table-layout プロパティをfixed にする場合、まず全体の横幅を指定する必要があります。 そこで table 要素に対して「width: 100%」を指定します。

次に1行目に指定された列幅の割合や実数値をテーブル全体に適用するので、 th 要素に対して列幅の割合や実数値を指定します。 このサンプルではクラスを使用して割合を指定しています。

下のコードは th 要素に対して「class="width30"」を指定しています。

<th class="width30">ヘッダ 30</th>

次のコードは「class="width30"」が指定された th 要素に対して「width: 30%」を指定してい

ます。

th.width30 {
    width: 30%;
}

列幅が指定されていない場合

上のサンプルでは、全ての列幅の割合を指定しました。

もし幅が「指定されていない列」がある場合は、 まず「指定されている列」に対して指定列幅を割り当て、 残りの幅が「指定されていない列」に対して均等に割り当てられます。