ホームページ >ウェブフロントエンド >CSSチュートリアル >CSSを使用して表のセルを等幅にする方法?

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

Barbara Streisand
Barbara Streisandオリジナル
2024-11-05 19:08:02251ブラウズ

How to Make Table Cells Equal Width Using 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 サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。