border-style: hidden; って知ってます?

CSS2.1 が正式に勧告されてしばらく経ちますが、その仕様書 Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification とにらめっこしてて、border-styleプロパティに普段使わない hidden という値がありました。これ知ってました?そして使ってます?

ざっくり説明すると、まずborder-collapseプロパティというのがある。テーブルの隣接するボーダーを分割(separate)するのか、結合(collapse)するのかを指定するプロパティです。

で、border-collapse: collapse; としたときにボーダーの結合部を非表示にするのが border-style: hidden; なんです。

3列3行のテーブルが二つ並んでる画像その一です。

画像の左側のテーブルは border-collapse: separate; を指定、右側のテーブルは border-collapse: collapse; を指定しています。そして、中央のセルだけ border-style: hidden; です。

ご覧のとおり、ボーダーが重なっているとこだけ非表示になってます。では、次の画像を見てください。

3列3行のテーブルが二つ並んでる画像その二です。

画像の左側のテーブルは border-collapse: separate; を指定、右側のテーブルは border-collapse: collapse; を指定しているのは一つ目の画像と同じなんですが、四隅のセル以外は border-style: none; です。

結局どちらも border-collapse: collapse; の場合の表示のされかたは同じになるんです。だから border-style: hidden; の使いどころがいまいちよく分からないんですよ。

でも、仕様書をよく読むと意外な発見があって面白いですね。