【table-layout】テーブル(表)の表示方法を指定

table-layoutプロパティではテーブル(表)を表示する際に、固定レイアウト(fixed)、自動レイアウト(auto)のどちらの方法で列幅を計算するかを指定することができます。

テーブル(表)は通常、テーブル(表)全体の内容をすべて読み込んでからセル幅を計算して表示します。 ですが固定レイアウト(fixed)を指定すると、テーブル(表)の1行目を読み込んだ時点で表示されるようになります。 このためテーブル(表)の表示速度を速める事ができますが、2行目以降も1行目で算出した横幅が維持されます。

書式

  • table-layout : ……… テーブルの(表)の表示方法を指定

★:auto、fixed、inherit

fixed
固定レイアウトで表示します。テーブル(表)の最初の横1列分のデータを読み込んだ時点で、各縦列の幅を決定し、データが横1列ずつ表示されるようになります。またセルの内容量は列の幅に影響しません。そのため、この表示方式にするためには、あらかじめテーブル(表)全体の幅、必要に応じて縦列、またはセルの幅をwidthプロパティで指定しておく必要があります。なお、幅が指定されていない列(widthにautoが指定されている場合も含む)については、残った分の幅が均等に割り当てられます。
auto
自動レイアウトで表示します。テーブル(表)全体のデータを読み込んでから、セルの内容量に応じて各縦列の幅を決定し表示します。(初期値)

使用した時の例

.sample1 {
  width: 100%;
  table-layout: fixed;
}

.sample2 {
  width: 100%;
  table-layout: auto;
}
<p>fixedの場合</p>
<table class="sample1">
  <tr>
     <th>名前</th>
     <th>説明</th>
     <th>特徴</th>
  </tr>
  <tr>
     <td>フジリンゴ</td>
     <td>青森県南津軽郡藤崎町産のフジりんご</td>
     <td>甘みと酸味のバランスが抜群!さっぱりとした食感</td>
  </tr>
  <tr>
     <td>スリムレッド</td>
     <td>群馬県農業総合試験場北部分場産のリンゴ</td>
     <td>香りがあまりしないが甘さは十分!ただしフジりんごあまり変わらない</td>
  </tr>
</table>

<p>autoの場合</p>
<table class="sample2">
  <tr>
     <th>名前</th>
     <th>説明</th>
     <th>特徴</th>
  </tr>
  <tr>
     <td>フジリンゴ</td>
     <td>青森県南津軽郡藤崎町産のフジりんご</td>
     <td>甘みと酸味のバランスが抜群!さっぱりとした食感</td>
  </tr>
  <tr>
     <td>スリムレッド</td>
     <td>群馬県農業総合試験場北部分場産のリンゴ</td>
     <td>香りがあまりしないが甘さは十分!ただしフジりんごあまり変わらない</td>
  </tr>
</table>

ブラウザ上の表示例

fixedの場合

名前 説明 特徴
フジリンゴ 青森県南津軽郡藤崎町産のフジりんご 甘みと酸味のバランスが抜群!さっぱりとした食感
スリムレッド 群馬県農業総合試験場北部分場産のリンゴ 香りがあまりしないが甘さは十分!ただしフジりんごあまり変わらない

autoの場合

名前 説明 特徴
フジリンゴ 青森県南津軽郡藤崎町産のフジりんご 甘みと酸味のバランスが抜群!さっぱりとした食感
スリムレッド 群馬県農業総合試験場北部分場産のリンゴ 香りがあまりしないが甘さは十分!ただしフジりんごあまり変わらない

対応ブラウザなどのデータ

初期値 auto 値の継承 継承しない
適用可能な要素 テーブル要素
メディア visual
対応ブラウザ Internet Explorer5~ , Google Chrome1~ , Firefox1~ , Opera3.5~ , Safari1~

関連情報