table-layoutプロパティ

TOPページに戻る > CSS

スポンサード リンク

table要素の表示方法を選択できます
初期値はautoで通常は表全体を読み込んでから一番大きいセルに合わせて横幅を自動で計算します。しかし、表全体が長いと表示が遅くなることがあります
値にfixedを指定すると、1行目のセルの横幅を元に計算するので表示が速くなります
値をfixedで指定した場合、col要素、colgroup要素でセルの幅をきめます。col要素、colgroup要素がない場合、1行目のセルの横幅で計算します。それもない場合は、ブラウザによって表示幅が決まります

使い方(書式)

セレクタ { table-layout: 値; }                                    

table-layoutプロパティ

対応ブラウザ ie6 ie7 ie8 ie9 ie10 ie11 google Chrome safari fire fox opera
適用できる要素 table要素
子要素へのスタイルの継承 しない

プロパティの値 説明
fixed 1行目の横幅でセルの横幅を決定します。そのため表示が速くなります。固定レイアウトです
auto 表全体のセルを読み込み、一番大きいセルに合わせて横幅を自動で計算します。表全体が長いと表示が遅くなることがあります。これが初期値

実際の指定方法

.hoge {
 table-layout: fixed;   /* 固定レイアウト */
 margin-bottom: 20px;  /* 見やすいように余白を指定 */
   }

.hoge col{       /* 子孫セレクタでhogeクラスのcol要素にスタイルを指定 */
 width: 100px;    /* col要素の横幅を指定 */
 }

.cell{
 width: 200px;    /* セルの最初の行の横幅を指定 */
 }
.hoge2 {
 table-layout: auto;   /* 横幅を自動で計算 */
 }

html部分

<p>実際の表示 値がfixed、col要素で指定した幅以上にはならない</p>
<table class="hoge">
<colgroup>
<col>
<col>
</colgroup>
<tr>
<td>セル1つ目</td>
<td>セル2つ目</td>
</tr>
<tr>
<td>col要素width: 100px;</td>
<td>col要素width: 100px;</td>
</tr>
</table>

<p>実際の表示 値がfixed、col要素がない場合は、最初の行の幅に合わせて表示される</p>
<table class="hoge">
<tr>
<td class="cell">最初の行、セル1つ目</td>
<td class="cell">最初の行、セル2つ目</td>
</tr>
<tr>
<td>width: 200px;</td>
<td>width: 200px;</td>
</tr>
</table>

<p>実際の表示 値がfixed、幅の指定がない場合はブラウザによって表示幅が決まります</p>
<table class="hoge">
<tr>
<td>最初の行、セル1つ目</td>
<td>最初の行、セル2つ目</td>
</tr>
<tr>
<td>指定なし</td>
<td>指定なし</td>
</tr>
</table>
<p>値がauto (一番大きいセルに横幅を自動調整)</p>
<table>
<colgroup>
<col>
<col>
</colgroup>
<tr>
<td>セル1つ目</td>
<td>セル2つ目</td>
</tr>
<tr>
<td>セル1つ目</td>
<td>セル2つ目</td>
</tr>
</table>

実際の表示 値がfixed、col要素で指定した幅以上にはならない

セル1つ目 セル2つ目
col要素width: 100px; col要素width: 100px;

実際の表示 値がfixed、col要素がない場合は、最初の行の幅に合わせて表示される

最初の行、セル1つ目 最初の行、セル2つ目
width: 200px; width: 200px;

実際の表示 値がfixed、幅の指定がない場合はブラウザによって表示幅が決まります

最初の行、セル1つ目 最初の行、セル2つ目
指定なし 指定なし

値がauto (一番大きいセルに横幅を自動調整)

セル1つ目 セル2つ目
セル1つ目 セル2つ目




(C)2012 ホームページ作成無料