css - 長い文字列を含む列でのCSSテーブルの配置の問題

Question

問題があります。テーブルが「セパレータ」行なしで完全に表示されます。この行サーバーは、テーブルの2つのセクションを分離します。この行の列（colspan = 2）には、その下のテーブルのセクションを説明する長い文字列が含まれています。残念ながら、この長い文字列が存在すると、テーブルの残りの部分がずれてしまいます。テーブルのサイズを変更するときにこの列を効果的に無視するようにテーブルに指示するにはどうすればよいですか、それ以外の方法で問題を修正するにはどうすればよいですか？

Answer 1

タグを使用colgroupしcolます（この方法で列幅を設定します）。次に、テーブルのCSSに追加table-layout: fixed;します。

<table>
    <colgroup>
        <col style="width:25%" />
        <col style="width:25%" />
        <col style="width:25%" />
        <col style="width:25%" />
    </colgroup>
    <thead>
        <!-- thead stuff here -->
    </thead>
    <tbody>
        <!-- tbody stuff here -->
    </tbody>
</table>

table { table-layout: fixed; }