CSS table-layout テーブル列幅の設定を指定

CSSのtable-layoutプロパティで、テーブル列幅の設定を指定するサンプルです。

目次

仕様 table-layoutプロパティの仕様
サンプル autoを指定
  fixedを指定

table-layoutプロパティの仕様

table-layout : 値

table-layoutプロパティは、テーブル列幅の設定を指定します。

説明
auto テーブルのセル内に入力された文字が全て表示されるように列の幅が変更されます。
fixed テーブルの列幅が均等になるように修正されます。
fixedは修繕という意味です。
値を継承しない

以下は、MDNのtable-layoutのリンクです。
https://developer.mozilla.org/ja/docs/Web/CSS/table-layout

autoを指定

table-layoutにautoを指定するサンプルです。

<style>
table {
    table-layout: auto;
    width: 120px;
    border: 1px solid black;
}
td {
    width: 30px;
    border: 1px solid red;
}
</style>
<table>
    <tr>
        <td>123456789</td>
        <td>12345678</td>
        <td>1234567</td>
    </tr>
    <tr>
        <td>123</td>
        <td>12</td>
        <td>1</td>
    </tr>
    <tr>
        <td>12345678912</td>
        <td>1234567812</td>
        <td>123456712</td>
    </tr>
</table>

3行目は、table-layoutにautoを指定しています。
12行目以降は、テーブルです。

以下は、実行イメージです。

セル内に入力された文字が全て表示されるように、それぞれの列の幅が変わっています。

fixedを指定

table-layoutにfixedを指定するサンプルです。

<style>
table {
    table-layout: fixed;
    width: 120px;
    border: 1px solid black;
}
td {
    width: 30px;
    border: 1px solid red;
}
</style>
<table>
    <tr>
        <td>123456789</td>
        <td>12345678</td>
        <td>1234567</td>
    </tr>
    <tr>
        <td>123</td>
        <td>12</td>
        <td>1</td>
    </tr>
    <tr>
        <td>12345678912</td>
        <td>1234567812</td>
        <td>123456712</td>
    </tr>
</table>

3行目は、table-layoutにfixedを指定しています。
12行目以降は、テーブルです。

以下は、実行イメージです。

autoを指定したときと異なり、入力した文字がはみだしています。
セルの幅がほぼ均等になっています。

上記の9行目のあとにoverflow:hiddenを追加すると文字は、はみ出しません。

関連の記事

CSS border-collapse テーブルの枠線を重ねる/離す
CSS border-spacing テーブルの枠線の間隔を指定
CSS border ボーダーの表示方法を指定する
CSS overflow 表示幅超える/スクロール表示非表示

△上に戻る