★゜・。。・゜゜・。。・゜☆ 2011年04月15日 ☆゜・。。・゜゜・。。・゜★
IE6バグ集(01) 罫線消失の巻
IE6が淘汰されてしまえば、この投稿は完全に意味をなさなくなるのですが、
IE6で、
- jquery-1.3以上を使用……（下のソース1行目）
- border-collapse:collapse;……（下のソース8行目）
- table-layout:fixed;……（下のソース9行目）
- tableの中にtableを入れている……（下のソース16～34行目）
の４つの条件がそろったとき、テーブルの各行の１つ目の罫線が消える
というバグを発見しましたので、書き留めておきます。
ソース↓
<script src="http://code.jquery.com/jquery-1.4.min.js"></script>
<style type="text/css">
table {
width:100%;
}
table.sample {
border-collapse:collapse;
table-layout:fixed;
}
table.sample td {
border:#000 solid 1px;
}
</style>
<table><tr><td>
<table class="sample">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>
</td></tr></table>
結果↓（ブラウザ依存。IE6以外では正しく見える）
|
IE6での見え方↓（画像）
tableの中にtableを入れるような書き方は、まずやりたくないし、かなり限定された条件なのでめったに起こらないことだと思いますが、既存のソースを修正するにあたって遭遇しました。
対応としては、今回「table-layout:fixed;」を削除しても問題なかったので、それで対処しましたが、tableの入れ子を避ける書き方が良いと思います。
あるいは、「border-collapse」を「separate」にして、例えばtd,thの罫線をtopとleftだけに引き、tableのrightとbottomで補う、というやり方でも良いとは思いますが、それもなんだかなぁ、という気がします。