web-dev-qa-db-ja.com

含まれるテーブルの幅全体を埋める等サイズのテーブルセル

HTML/CSS（相対的なサイズ変更を使用）を使用して、セルの行が含まれるテーブルの幅全体を広げる方法はありますか？

セルの幅は等しく、外側のテーブルサイズも<table width="100%">で動的でなければなりません。

現在、固定サイズを指定しない場合。セルはコンテンツに合わせて自動サイズ調整されます。

htmlcsshtml-table
88
yogibear

セルに特定の幅を設定する必要さえありません。セルを均等に広げるにはtable-layout: fixedで十分です。これを参照してください jsfiddle 、IE8でテスト済み。

table-layoutが機能するには、テーブルスタイルの要素に幅を設定する必要があります（この例では100％）。

138
Simon

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

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

と

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

固定テーブルレイアウトは重要です。そうしないと、コンテンツが収まらない場合にブラウザが幅を調整します。つまり、幅は固定テーブルレイアウトのない規則ではなく提案です。

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

112
cletus

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

demo を参照してください。

4
Shashank