CSS：テーブル左上隅のセルだけ消す

↓ こんなの。いわゆるボンネットバス型ですね。って自分が勝手に呼んでるんだけど。先日の簡易文字コード表の中で、CSS3の疑似クラスを使って作りました。テンプレートとして少しまとめておきます。下記テーブルのCSSはこちら。動作確認はWindows7＋Chromium43、Firefox39でしました。

	column1	column2	column3	column4
row1	✐	✒	✔	✖
row2	✠	✢	✤	✦
row3	✰	✲	✴	✶

Contents

元テーブル
行・列ヘッダに背景色ない場合
〃背景色ある場合

元テーブル

	column1	column2	column3	column4
row1	✐	✒	✔	✖
row2	✠	✢	✤	✦
row3	✰	✲	✴	✶

»Image

↓ ソースです。上のテーブル自体はJavaScriptで挿入してます（同じHTMLを何度も書くのを避けて）。行ヘッダをTHタグにしてもいいですが、CSSを簡単にするため全てTDにしました。

<style>
table {
    border-collapse: collapse;
    font-size: 16px;
}
td {
    border: gray solid 1px;
    padding: 5px;
    text-align: center;
}
</style>
<table>
<tr><td><td>column1<td>column2<td>column3<td>column4
<tr><td>row1<td>&#x2710;<td>&#x2712;<td>&#x2714;<td>&#x2716;
<tr><td>row2<td>&#x2720;<td>&#x2722;<td>&#x2724;<td>&#x2726;
<tr><td>row3<td>&#x2730;<td>&#x2732;<td>&#x2734;<td>&#x2736;
</table>

行・列ヘッダに背景色ない場合

	column1	column2	column3	column4
row1	✐	✒	✔	✖
row2	✠	✢	✤	✦
row3	✰	✲	✴	✶

»Image

上のように、左上隅のセルの左・上だけ罫線を消すCSS↓ です。テーブルに適当なクラス名を付け、「最初のTRタグが含む、最初のTDタグ」を疑似クラスで指定。これが左上隅のセルになるので、その罫線を無効にします。セル右・下の罫線は、隣接するセルの罫線が生きているので消えず、これでOK。

<style>
/* table, td 元テーブルと同じ */

.tb1 tr:first-child td:first-child {
    border: none;
}
</style>
<table class="tb1"><!-- 元テーブルと同じ --></table>

実は当初、律儀にこのセルの左・上の罫線だけ消そうとしましたが、結果が何か変で（テーブル全体の左側の罫線が消えた）実装がまだ揺らいでるかも。とりあえずChromiumとFirefoxでは、上記のCSSで期待どおりの結果になりました。

↓ ついでに、行・列ヘッダの罫線を全てなくす例。「最初のTRが含む全てのTD」または「全てのTRが含む最初のTD」が行・列ヘッダの全セルになるので、その罫線を消します。データの境界部分にある罫線は、先ほどと同様に消えないのでOK。

	column1	column2	column3	column4
row1	✐	✒	✔	✖
row2	✠	✢	✤	✦
row3	✰	✲	✴	✶

»Image

<style>
/* table, td 元テーブルと同じ */

.tb2 tr:first-child td,
.tb2 tr td:first-child {
    border: none;
}
</style>
<table class="tb2"><!-- 元テーブルと同じ --></table>

行・列ヘッダに背景色ある場合

まず、元テーブルの行・列ヘッダに、単純に背景色を付けたものは ↓ こうです。上のCSSと同様に「行・列ヘッダの全セル」を指定して、罫線をなくす代わりに背景色を設定。

	column1	column2	column3	column4
row1	✐	✒	✔	✖
row2	✠	✢	✤	✦
row3	✰	✲	✴	✶

»Image

<style>
/* table, td 元テーブルと同じ */

.tb3 tr:first-child td,
.tb3 tr td:first-child {
    background: whitesmoke;
}
</style>
<table class="tb3"><!-- 元テーブルと同じ --></table>

上の状態から、左上隅セルだけ罫線・背景色を消したい。でも背景色は消せないようで、borderと同様にnoneを指定すると、行・列ヘッダ全体に指定された背景色が有効になる。↓ はとりあえず弥縫策で、白の背景色で上書きするもの。地の色が変わったら困ります。

	column1	column2	column3	column4
row1	✐	✒	✔	✖
row2	✠	✢	✤	✦
row3	✰	✲	✴	✶

»Image

<style>
/* table, td 元テーブルと同じ */

.tb4 tr:first-child,
.tb4 tr td:first-child {
    background: whitesmoke;
}
.tb4 tr:first-child td:first-child {
    background: white; /* ここが難あり */
    border: none;
}
</style>
<table class="tb4"><!-- 元テーブルと同じ --></table>

そこで発想を変え、「左上隅セル」「左上隅を除く行・列ヘッダ部分」別々にスタイルを設定しました ↓ 最初にやった「左上隅の罫線だけ消す」に加え、左上隅以外の行・列ヘッダに背景色を付けるもの。後者のCSS疑似クラスが少し面倒ですが、上の弥縫策と違って地色が変わっても大丈夫。

	column1	column2	column3	column4
row1	✐	✒	✔	✖
row2	✠	✢	✤	✦
row3	✰	✲	✴	✶

»Image

<style>
/* table, td 元テーブルと同じ */

.tb5 tr:first-child td:first-child {
    border: none;
}
.tb5 tr:first-child td:nth-child(n+2),
.tb5 tr:nth-child(n+2) td:first-child {
    background: whitesmoke;
}
</style>
<table class="tb5"><!-- 元テーブルと同じ --></table>

CSSの二つ目のブロックが「左上隅を除く行・列ヘッダ部分」の抽出で、疑似クラスのnth-child(n+2)を使って「最初のTRが含むTDの2番目以降」または「テーブル内の2番目以降のTRが含む、最初のTD」を意味しています。このnはゼロ始まり。

こういう左上隅セルを省略した形の、ある意味対極にあるのが、セル内を＼で斜めに区切って行名・列名を小さく入れるもの。昔はよく見たけど、Excelで簡単にできないから？最近は余り見かけません。

そう言えばセル内の斜め線は、Excelでは簡単だけどHTMLとCSSだけでは難しそう。CSS3で線を回転させても、セルサイズが変わった時にどうするか…。それよりSVGで斜め線だけ作ってセルにはめ込むとか。何か過去の遺物の再現で非生産的な気がするなぁ。
8月9日追記：一応CSS3とJavaScriptで「セル内の斜線」を試し、3回に分けて書きました。
» 8月7日（CSSのみ）
» 8月8日（CSSのパラメータの算出過程）
» 8月9日（JavaScriptを援用）