table要素で四方のボーダーを表示するように設定しているにもかかわらず、表示されないことがある。
- Category: Internet Explorer, Mac
- Tag: border, table
例示
<table border="1" cellspacing="0" style="width:100%; border:1px solid;">
<thead>
<tr>
<th>A</th>
<th>A</th>
<th>A</th>
</tr>
</thead>
<tbody>
<tr>
<td>B</td>
<td>B</td>
<td>B</td>
</tr>
<tr>
<td>C</td>
<td>C</td>
<td>C</td>
</tr>
</tbody>
</table>
| A | A | A |
|---|---|---|
| B | B | B |
| C | C | C |
table要素に1pxのボーダーを、四方に設定しています。
スクリーンショット
※WinIEは右ボーダーと下ボーダーの色が背景色に近いために見えにくくなっています。
WinIE6.0での表示(標準モード)
補足
tbody要素の終了タグの直前に空行を置くとバグが回避されることがあります。
修正状況
MacIE5で発生する模様。
報告書き込み
【MacIE5】
表を囲む四方の枠線のうち、border-bottomだけ表示されなくなる。
実例は以下で見た。
http://www.geocities.co.jp/CollegeLife-Library/1959/reference/bibliography.htm
table.classA {width:100%; border:1px solid;}
<table border="1" cellspacing="0" class="classA">
<thead>
<tr>
<th width="**%">......</th><th width="**%">......</th>以下略
</tr>
</THEAD>
<tbody>
<tr>
<td>......</td><td>......</td><td>......</td>以下略
</tr>
</tbody>
</table>
しかしなぜかHTMLソースで、</tbody>の前、</tr>との間に、一行の空行を空けてあると
テーブルはちゃんとborder-bottomも枠線が引かれる。
他にも、Opera6やMacIEでは、改行するかしないかで
CSSバグが出たり出なかったりする場合がたまにあるんだな。


