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>
ログイン後にコピー
仕組みは次のとおりです。
- テーブル レイアウトの設定: 固定。親 div コンテナ上。これにより、テーブルが指定されたサイズを維持しようとするテーブル レイアウト アルゴリズムが有効になります。
- 各 div (テーブル セル) に幅を割り当てます。この例では、2% に設定していますが、要件に応じて調整できます。
- この幅により、固定テーブル レイアウト動作がトリガーされ、ブラウザーは各セルに均等に幅を割り当てます。コンテンツのサイズに関係なく、幅は同じになります。
追加メモ:
- このソリューションは Chrome および IE8 と互換性があります。
- macOS 上の Safari 6 では、table-layout:fixed; の解釈が異なることに注意してください。これにより、そのブラウザでは異なる結果が生じる可能性があります。
- 親 div (テーブル) に固定幅を設定して、テーブル全体の幅を制御できます。幅を指定しない場合は、デフォルトで 100% が使用されます。
以上がCSSを使用して表のセルを等幅にする方法?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。