セパレートタイプのボーダーの考え方
tableのボーダーは通常のボックスモデルの考え方ではありませんので注意してください。
まず、tableタグにボーダーを設定するとテーブル全体の外枠だけボーダーが引かれます。その際にwidth指定すると通常のボックスモデルのようにwidthの外にborderが引かれるわけではありません。
tableのボーダーはborderを含めた値がwidthになります。
さらに面倒なのはtdやthなどのセル部分です。これらにボーダーを引いた場合は、今度は通常のボックスモデルのようにwidthの外側にborderが付きます。
本来、テーブルはレイアウトをするためのものではありませんのでこのような細かいことは気にしなくても良いのですが、思わぬところで落とし穴にハマりますので注意してください。
この辺の仕組みはCSSの仕様書を見るとどの部分がtable widthなのか、またどの部分がcell widthか図解されていますので一度参考にすると良いでしょう。
次のサンプルはセパレートタイプのボーダーを付けた簡単なサンプルです。
このサンプルのポイントは右側のセル部分にフロートしたdivを横並びにしていることです。td部分のwidth指定は無いので、その他のborderやth部分のサイズ指定が適切でないと横並びのdivはカラム落ちしてしまいます。
サンプル
HTMLコード
<table> <tr> <th>ここに項目</th> <td> <div class="box1"></div><div class="box2"></div> </td> </tr> </table>
CSSの設定でポイントはthのwidth指定です。
tableのwidthが600pxですから、通常のボックスモデルの考え方ではtdが500pxならthのwidthは100pxになるはずです。
ただし、今回は「td」,「th」に1pxのボーダーを付けますので2つのセルの左右のボーダーを計算に入れて、widthは100pxー4px＝96pxにする必要があります。セルはボックスモデルの考え方になっていますのでここまでの計算はそのまま使えます。
ところが、この設定ではdivはカラム落ちしてしまいます。
ここからがポイントです。テーブルの場合はtableタグのwidthの考え方がボックスモデルとは違うことです。
問題はtableタグに付けられた2pxのボーダーの扱いです。tableタグの場合はborderを含めたサイズがwidthになりますので、tableに指定したwidthが600pxでborderのサイズが2pxならボックスモデルでいうwidthの幅は596pxということになります。
そのためthのサイズは先ほど計算したサイズからさらに4pxマイナスする必要があるのです。
CSSコード
*{
margin:0;
padding:0;
}
table{
border:2px #000 solid;
border-collapse:separate;
border-spacing: 0;
width:600px;
table-layout: fixed;
}
th{
width:92px;
border:1px #f00 solid;
}
td{
border:1px #000 solid;
}
.box1{
width:250px;
height:250px;
background-color:pink;
float:left;
}
.box2{
background-color:yellow;
width:250px;
height:250px;
float:left;
}
ボーダーのcollapse表示の場合
CSSでborder-collapseプロパティをcollapseという値にするとボーダーは重なって表示されます。
この時のwidthの扱いをみていきます。
collapseを使ってボーダーを重ねた場合は重なった部分のボーダーは太い方のサイズに相殺されたと考えて計算します。
「th」と「td」間のそれぞれのボーダーは重なります。そのため両者の重なったボーダーサイズは1pxです。
またtableと「th」、「td」の間も重なります。そのためtableのボーダーと重なった「th」、「td」のボーダーは左右それぞれtableのボーダーに吸収された2pxとなります。
そのためthのwidthは95pxとすればdivはカラム落ちしないことになります。
サンプル
CSSコード
*{
margin:0;
padding:0;
}
table{
border:2px #000 solid;
border-collapse: collapse;
width:600px;
table-layout: fixed;
}
th{
width:95px;
border:1px #f00 solid;
}
td{
border:1px #000 solid;
}
.box1{
width:250px;
height:250px;
background-color:pink;
float:left;
}
.box2{
background-color:yellow;
width:250px;
height:250px;
float:left;
}
コメントを投稿するにはログインしてください。