CSSテーブル - テーブルの表示方法設定 | table-layout

CSSテーブル関連属性：
◇　empty-cells
◇　border-collapse
◇　table-layout
◇　border-spacing
◇　caption-side

table-layout属性

table-layoutは、テーブルの表示方法を指定します。

■　table-layout属性の適用対象要素
table

■　table-layout属性の値
◇　auto：　自動レイアウト。各セル内容に合わせてテーブルの列幅を自動的に決定します。デフォルト値。
◇　fixed：　固定レイアウト。テーブルの列幅を固定します。

※デフォルト（auto）の場合、ブラウザーはテーブルの全体を読込み、各セルの内容に合わせて列幅を決定して表示をし始めます。複雑な（階層深い）テーブルの場合、ブラウザーの表示時間がかかってしまうことも考えられます、現在は、tableを使わず、divタグとCSSでのレイアウトが推奨（主流）されています。
※fixedと指定される場合、幅が指定されていない列に幅は均等に割り当てられるため、テーブルの列、もしくはテーブルの一行を読み込んだ時点で、すぐ表示開始します。

table-layout属性の使用例

◇　table-layout: fixed;の場合
<table border="1px" style="table-layout: fixed;width: 400px;border: 1px gray solid;">
    <tr>
        <td>セル内容</td>
        <td>セル内容：あいうえおあいうえお</td>
    </tr>
    <tr>
        <td>セル内容</td>
        <td>セル内容：あいうえおあいうえお</td>
    </tr>
</table>

表示：

セル内容	セル内容：あいうえおあいうえお
セル内容	セル内容：あいうえおあいうえお

◇　デフォルトの場合
<table border="1px" style="width: 400px;border: 1px gray solid;">
    <tr>
        <td>セル内容</td>
        <td>セル内容：あいうえおあいうえお</td>
    </tr>
    <tr>
        <td>セル内容</td>
        <td>セル内容：あいうえおあいうえお</td>
    </tr>
</table>

表示：

セル内容	セル内容：あいうえおあいうえお
セル内容	セル内容：あいうえおあいうえお

Sponsored Link