純粋に CSS を使用して、さまざまなコンテンツを含む同じ幅の表セルを作成できますか?

可変内容の等しい幅のテーブル セル

テーブル コンテナー内に複数のテーブル セル要素があるシナリオを考えてみましょう。コンテンツのサイズが異なる場合でも、これらの表のセルの幅を同じにする必要があります。これを実現するための純粋な CSS ソリューションはありますか?

解決策:

コンテンツ サイズに関係なくテーブルセルの幅を等しくするには、次の CSS アプローチを利用できます。 :

1. 固定テーブル レイアウト: テーブル レイアウトの適用: 固定;テーブルを表す親 div にコピーします。これは基本的に、指定されたセル幅に厳密に従うようにブラウザに指示します。
2. 最小セル幅: 各セルの最小幅を、2% のような小さい幅でも設定します (div >ディビジョン）。これにより、目的のテーブル レイアウト アルゴリズムがトリガーされ、ブラウザーは指定されたセルのサイズを尊重しようとします。

コード例:

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

div > div {
  display: table-cell;
  width: 2%;
}</code>

注:

このソリューションは Chrome、IE8、Safari 6 で動作します (いくつかの注意事項があります)。ただし、Safari 6 では他のブラウザと比べてテーブル レイアウトの動作が異なる可能性があることに留意することが重要です。

以上が純粋に CSS を使用して、さまざまなコンテンツを含む同じ幅の表セルを作成できますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。