2009年07月17日

『table-layout』を使おう! その2

こんにちは。
溝上です。

今回は『table-layoutを使おう! その2』をお送りします。
まずは前回と同じく、table-layoutの効果を簡単に説明します。

table-layoutにfixedを指定すると
1.tableの幅が指定されており、th,tdで幅が指定されていない場合、同じ幅になる
2.1行目のtd,thの幅が2行目以降に適用される
3.ページの表示速度がUPする

▼1行目のtd,thの幅が2行目以降に適用される


それでは前回の続きからご紹介します。
table-layoutにfixedを指定すると1行目で指定した幅が2行目以降にも適用されます。
まずはサンプルをどうぞ。
(cssサンプル)
body {
  padding:15px;
}
.section {
  width:400px;
  padding-bottom:30px;
}
table {
  width:100%;
}
table.auto {
  table-layout:auto;
}
table.fixed {
  table-layout:fixed;
}

table td {
  padding:10px;
  border:1px solid #000000;
}
table .w50 {
  width:50px;
}
htmlコーディング例
<div class="section">
<table class="auto">
<tr>
<td class="w50">width:50px</td>
<td>指定無し</td>
<td>指定無し</td>
</tr>
<tr>
<td>指定無し</td>
<td class="w50">width:50px</td>
<td>指定無し</td>
</tr>
</table>
</div>

<div class="section">
<table class="fixed">
<tr>
<td class="w50">width:50px</td>
<td>指定無し</td>
<td>指定無し</td>
</tr>
<tr>
<td>指定無し</td>
<td class="w50">width:50px</td>
<td>指定無し</td>
</tr>
</table>
</div>

さて、autoとfixedではどう変わるでしょうか。
まずはautoの場合をどうぞ。

▼スクリーンショット(table-layout:auto)

※スクリーンショットは、Windows Firefox3.0のものです。

続いてfixedの場合。

▼スクリーンショット(table-layout:fixed)

※スクリーンショットは、Windows Firefox3.0のものです。

table-layoutがautoの場合、2行目のtdの幅指定が効いて一番左と真ん中の列が同じ幅になっています。
table-layoutがfixedの場合、1行目で指定した幅のみ効いていて2行目の幅指定は無視されています。
1行目が読み込まれた時点でth,tdの幅を決定してるらしいです。

ちなみにtableの幅が指定させていなければth,tdの2行目以降の幅指定も有効になるみたいです。

次回はいよいよ最後、『ページの表示速度がUPする』についてお伝えしたいと思います。

HTML5&CSS3の最新情報はこちら → HTML5GOGO

タグ:CSS table-layout
posted by baba at 19:42 | Comment(0) | TrackBack(0) | 情報
この記事へのコメント

この記事へのトラックバック
 
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。