CSS はコンテンツのサイズに関係なくテーブルのセル幅を制御できますか?

CSS を使用したテーブルのセル幅の制御

HTML テーブルの領域では、さまざまなサイズのコンテンツを扱うときに、テーブルのセルの幅を均一にすることが課題となる場合があります。関連するセルの数に関係なく、CSS だけでこの望ましい結果を達成できますか?

HTML の構造は単純です。子

はテーブル コンテナとして機能します。要素は表のセルを表します。

<code class="html"><div style="display: table;">
  <div style="display: table-cell;"></div>
  <div style="display: table-cell;"></div>
</div></code>

CSS を利用してこの問題に対処できます。コンテンツのサイズに関係なく、セルの幅を均等にするには、次の操作を行う必要があります。

1. 固定テーブル レイアウト メカニズムをトリガーします。 Set table-layout:fixed;親
   に。これは、コンテンツに合わせてセル幅を自動調整するのではなく、指定されたセル幅を強制するようにブラウザに指示します。
2. 表のセルに幅を割り当てる: 必須ではありませんが、小さい幅 (例: 2) を割り当てます。 %) 各
   に表のセルを表すことは、固定表レイアウトのトリガーとして機能します。

   最終的な CSS コードは次のようになります:

   <code class="css">div {
     display: table;
     width: 250px;
     table-layout: fixed;
   }
   
   div > div {
     display: table-cell;
     width: 2%;
   }</code>

   このアプローチでは、表のセルは等しく維持されます。幅を調整し、コンテンツに関係なく一貫した外観を確保します。