table-layout

CSS の table-layout プロパティは、 <table> のセル、行、列のレイアウトに使用されるアルゴリズムを設定します。

このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 https://github.com/mdn/interactive-examples をクローンしてプルリクエストを送信してください。

/* キーワード値 */
table-layout: auto;
table-layout: fixed;

/* グローバル値 */
table-layout: inherit;
table-layout: initial;
table-layout: unset;

auto

既定値で、ほとんどのブラウザーが表の自動レイアウトアルゴリズムを使用します。表とセルの幅は中身に合うように調整されます。

fixed

表と列の幅は table 要素と col 要素の幅によって、または最初の行のセルの幅によって設定されます。後続する行のセルは列幅の設定に影響しません。

"fixed" レイアウト方法に於いては、一度テーブルの一行目のみをダウンロードして解析した後、テーブル全体をレンダリングします。これは自動テーブルレイアウトアルゴリズムよりレンダリング速度を速くする事が出来ますが、後続するセルのコンテンツが用意された列幅に収まらないかもしれません。セルは overflow プロパティを使用して、表の幅が分かっている場合、はみ出すコンテンツを切り取るかどうかを定めます。そうでなければ、セルははみ出しません。

auto | fixed

この例は表の固定レイアウトを使用し、 width プロパティとの組み合わせで、表の幅を制限しています。 text-overflow プロパティを使用して、語が長すぎる場合は省略記号を使用するようにしています。

表のレイアウトが auto である場合、表は指定された width よりも内容に合わせて広がります。

<table>
  <tr><td>Ed</td><td>Wood</td></tr>
  <tr><td>Albert</td><td>Schweitzer</td></tr>
  <tr><td>Jane</td><td>Fonda</td></tr>
  <tr><td>William</td><td>Shakespeare</td></tr>
</table>

table {
  table-layout: fixed;
  width: 120px;
  border: 1px solid red;
}

td {
  border: 1px solid blue;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}