CSSで表のセルの幅を均等にする方法は?

CSS で表のセルの幅を均等化する

複数のセルを含む表では、各セル内のコンテンツが異なる場合、均等な幅を確保することが困難になることがあります。は異なります。この問題は、セルの合計数に関する知識が必要となるため、最大幅を設定しようとすると発生します。

純粋な CSS ソリューション

幸いなことに、純粋な CSS ソリューションが存在します。コンテンツの変化に関係なく、表のセルの幅を均等にする CSS ソリューション。この手法では、次の CSS プロパティを利用します:

1. table-layout:fixed;: このプロパティは、テーブルに固定レイアウトを適用し、セルが指定された幅を確実に遵守するようにします。
2. 各セルの幅: 代替表計算アルゴリズムをトリガーするには、各セルに小さな幅 (例: 2%) を割り当てます。

実装

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

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

この CSS は、内容が異なっていても表のセルの幅が同じになるようにします。

互換性に関する考慮事項

テーブルのレイアウト: 修正されました。プロパティは、Chrome や IE8 などの最新のブラウザで広くサポートされています。ただし、OS X 上の Safari 6 ではこのプロパティの実装方法が異なるため、予期しない結果が生じる可能性があります。予防措置として、潜在的な互換性の問題を考慮して、さまざまなブラウザーでソリューションをテストすることをお勧めします。

以上がCSSで表のセルの幅を均等にする方法は?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。