含まれているテーブルの幅全体を埋めるための同じサイズのテーブルセル

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％）を持っている必要があります。

パーセント幅と固定テーブルレイアウトを使用するだけです。

<table>
<tr>
  <td>1</td>
  <td>2</td>
  <td>3</td>
</tr>
</table>

と

table { table-layout: fixed; }
td { width: 33%; }

固定されたテーブルレイアウトは重要です。それ以外の場合、コンテンツが収まらない場合、ブラウザは幅が適切と見なされるように調整します。つまり、幅は固定されたテーブルレイアウトなしのルールではなく提案です。

明らかに、CSSを状況に合わせて調整します。これは通常、特定のクラスまたは特定のIDを持つテーブルにのみスタイルを適用することを意味します。

使用table-layout: fixedのためのプロパティとしてtable及びwidth: calc(100%/3);ためにtd（仮定3があるtdさん）。これら2つのプロパティを設定すると、テーブルセルのサイズが等しくなります。

デモを参照してください。