1. ホーム
  2. html

[解決済み] 同じ大きさのテーブルセルが、包含するテーブルの幅全体を満たすようにする。

2022-12-07 10:48:58

質問

HTML/CSS (相対サイズ) を使って、セルの行を、それが含まれるテーブルの幅全体に伸ばす方法はありますか?

セルは同じ幅であるべきで、外側のテーブルのサイズも動的であるため <table width="100%"> .

現在、固定サイズを指定しない場合、セルはその内容に合わせて自動的にサイズ調整されます。

どのように解決するのですか?

セルの幅も特に設定する必要はありません。 table-layout: fixed で十分です。

ul {
    width: 100%;
    display: table;
    table-layout: fixed;
    border-collapse: collapse;
}
li {
    display: table-cell;
    text-align: center;
    border: 1px solid hotpink;
    vertical-align: middle;
    word-wrap: break-word;
}
<ul>
  <li>foo<br>foo</li>
  <li>barbarbarbarbar</li>
  <li>baz</li>
</ul>

なお table-layout を動作させるためには、テーブルスタイル要素は幅を設定しなければならないことに注意してください(私の例では100%)。