CSSを使用して表のセルを等幅にする方法?

CSS を使用した等幅テーブルセル

質問:

どうすれば不定値を作成できますかコンテンツ サイズに関係なく、テーブル コンテナ内のテーブル セル要素の数は同じ幅になります?

答え:

はい、純粋な CSS を使用してこれを実現できます。 .

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

div > div {
  display: table-cell;
  width: 2%; /* or 100% according to OP comment */
}</code>

仕組みは次のとおりです。

1. テーブル レイアウトの設定: 固定。親 div コンテナ上。これにより、テーブルが指定されたサイズを維持しようとするテーブル レイアウト アルゴリズムが有効になります。
2. 各 div (テーブル セル) に幅を割り当てます。この例では、2% に設定していますが、要件に応じて調整できます。
3. この幅により、固定テーブル レイアウト動作がトリガーされ、ブラウザーは各セルに均等に幅を割り当てます。コンテンツのサイズに関係なく、幅は同じになります。

追加メモ:

• このソリューションは Chrome および IE8 と互換性があります。
• macOS 上の Safari 6 では、table-layout:fixed; の解釈が異なることに注意してください。これにより、そのブラウザでは異なる結果が生じる可能性があります。
• 親 div (テーブル) に固定幅を設定して、テーブル全体の幅を制御できます。幅を指定しない場合は、デフォルトで 100% が使用されます。

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