1px solid指定のテーブルで外枠だけ色を変える方法

開発

例によって今回も経済の話はなし。政治がこうどうしようもない状況では、どんな政策も通らないわけで、やや虚しさを感じてしまう（暑いので単に夏バテしているだけではという話もある）。

それはともかく、結構前からtableのボーダーの優先順位に関しては、苦労が多く特に表題にある「border-collapse: collapse; border: 1px solid #??????」指定のテーブルで外枠だけを変える方法がわからなくて困っていたのだが、なんとか回避する方法が見つかったので覚書として書いておく。

なお、CSSの仕様によれば、以下の優先順位となる（優先順位の高いほうが先頭）。

  1. border-style が hidden（だが、IE6, IE7では使えない）
  2. より border-width が大きい
  3. border-style が double > solid > dashed > dotted > ridge > outset > groove > inset
  4. th, td > tr > thead, tbody, tfoot > col > colgroup > table
  5. border-style が none

この仕様を読む限り、border: 1px solid の場合に外枠だけ色を変える方法がないことに気付かされる（tableの優先順位は最低の次である）。

正直、こればかりは各セルに対して個別にスタイルを指定しないといけないのかと途方にくれていたのだが、そこで border-style が double > solid であることに気づく。border-width: 1px ならば solidでもdoubleでも表示結果は同じなのではないだろうか。

これが大当たりだった。下記のコードを表示すると意図した通りに表示されていることに気づくだろう。

<style type="text/css">
.sample { border-collapse: collapse; border: 1px double red; }
.sample td { border: 1px solid blue; }
</style>
<table class="sample">
<td>セル</td><td>セル</td>
<td>セル</td><td>セル</td>
</table>
セルセル セルセル

昨今のブラウザでは搭載されているズーム機能を用いるとばれるかもしれないが、通常はそんなことしないので、問題にはならないだろう。ただ、この方法でもborder-width: 3px 以上だと、回避することはできないという問題は残る（まぁ、そんな太線でセルを覆いたい場合はそう多くないだろうけれど）。