2010年05月14日

colspan使用時のテーブル列幅指定について

こんにちは。島津です。
今回は、テーブルの列の幅指定に関する話題です。

表組みを使う時、内容やデザインにしたがって
列の幅サイズを指定することはよくあると思いますが、
colspanによるセル結合と組み合わせて使った場合に
実はちょっとした落とし穴があります。

とりあえずサンプルをご覧下さい。

▼スクリーンショット

※上がWindows Firefox3、下がWindows Internet Explorer7です。
(htmlコーディング)
<table>
<tr>
<th class="col01">商品No.</th>
<th class="col02">商品名</th>
<th class="col03">価格</th>
<th class="col04">概要</th>
</tr>
<tr>
<td class="col01">01</td>
<td class="col02">キャロットケーキ</td>
<td class="col03">¥400</td>
<td class="col04">採れたての甘いにんじんを使った、見た目もかわいいケーキです。野菜が苦手なお子様にも</td>
</tr>
<tr>
<td class="col01">02</td>
<td class="col02">ミシシッピマッドケーキ</td>
<td class="col03">¥600</td>
<td class="col04">当店人気No.1!チョコレート生地にナッツがぎっしりの、濃厚な味わい。コーヒーとの相性も抜群です</td>
</tr>
<tr>
<td class="col01">03</td>
<td class="col02">シーフードケーキ</td>
<td class="col03">¥750</td>
<td class="col04">瀬戸内海産の新鮮な魚介をふんだんに使った、次世代スイーツ!強靭な胃腸をお持ちの方に。</td>
</tr>
<tr>
<td class="col01">04</td>
<td class="col02">激辛ハバネロケーキ</td>
<td class="col04" colspan="2">大変申し訳ございませんが、諸事情によりこちらの商品は取り扱いを中止させて頂きました。</td>
</tr>
</table>
(cssサンプル)
body {

color:#766;
font-size:75%;

}
table {

font-size:100%;
border:solid 1px #A99;
border-collapse:collapse;

}
th,td {

padding:5px;
border:solid 1px #A99;
text-align:center;

}
th {

background-color:#FFF4F7;

}
td {

background-color:#FFF9F4;

}
td.col03 {

text-align:right; color:#EE0000;

}
td.col04 {

text-align:left;

}

/* テーブル列幅指定 */
.col01 {

width:40px;

}
.col02 {

width:120px;

}
.col03 {

width:40px;

}
.col04 {

width:200px;

}
最下段、セルを結合した箇所の表示が異なっています。

Firefoxでは(デバッグツールのFirebugによると)
「col03」と「col04」を足し算した幅になっていました。

一方IE7では、表組み上セルは結合されているものの
中の要素はキッチリ「col04」の幅のままになっているようで、
右側に「col03」分の余白が空いています。

ブラウザによる仕様の違いだと思うのですが、
px単位で列幅を指定するとこの現象が起こるみたいです。

本当は結合セル用のクラスを定義するのが望ましいのですが、
結合のパターンがたくさんある場合はなかなか難しいかも知れませんので
ここはひとつ、幅指定の方針をちょっと変えてみます。

▼スクリーンショット

※上がWindows Firefox3、下がWindows Internet Explorer7です。
(cssサンプル)
/* テーブル列幅指定 */
table {

width:500px;

}
.col01 {

width:10%;

}
.col02 {

width:30%;

}
.col03 {

width:10%;

}
.col04 {

width:50%;

}
テーブルの幅の方を固定にし、列幅は%単位で指定しています。
クラスを増やさずCSSの修正だけで、同じように表示されるようになりました。

もともと、テーブルで列幅を%指定する場合は、合計が100%にならなくても
大抵ブラウザが勝手に調整してくれるので、px指定するより柔軟性があって
安全ではないかと思います(セル結合有無に関わらず)。

paddingやborderを一緒に指定する場合は、px指定の場合と
若干横幅が変わってくるので、最終的には目視で微調整するのが確実ですね。

今回は以上です。ありがとうございました。

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

posted by baba at 19:12 | Comment(0) | TrackBack(0) | 情報
この記事へのコメント

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

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