【CSS】table(テーブル)の列幅の割合を指定する

スポンサーリンク

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

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

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

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

ヘッダ 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%;
}

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

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

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

役立ちツール

CSS 基本事項

CSS セレクタ

CSS テキスト・フォント

CSS 色・画像・背景

CSS ボックス

トランジション

リスト

テーブル

CSS レイアウト

CSS その他

用語

関連サイト