テーブルのセルをわかりやすくする

テーブル記法で書いてて、セルが多くなってきたり、空のセルが増えてきたりすると、

どこにどの値があるのか見えなくなってくるな～と思ったんで、ちょっとスタイルを変えてみた。

テーブル機能がどんどんアップデートされてるので、ここにあるスタイルは古くて使えなくなってます。

新しいテーブルのスタイルはカスタマイズしなくても見やすいので、今後このページの更新はしないかもです。

サンプル

table:Habit Tracker

M T W T F S S Note

早起き × × × × - - - 朝暗いから

1万歩 × ○ × ○ - - -

早寝 × × × × - - - 夜長いから

サンプル（画像）

https://gyazo.com/736c4ae8bd542b2293adc14c8f9a3d82

テーブルのセル間を見えるようにしてみた。

だいたい1行目が見出しなので、太字&中央揃えで表示するようにした。

偶数行が少し濃くなるようにした。

副作用かもしれないけど、セルが不足してるときは背景色が抜けるからすぐわかるよ…。

code:style.css

/* テーブルのセルをわかりやすくする */

.table-block table { background-color: transparent; border-collapse: separate; border-spacing: 2px }

.table-block table tr td:nth-child(odd) { padding: .1em; background-color: rgba(0,0,0,0.04) }

.table-block table tr:nth-child(even) td { background-color: rgba(0,0,0,0.06) } /* 偶数行を濃くする */

.table-block table tr:first-child td { font-weight: bolder; text-align: center } /* 1行目だけ太字&中央揃え */

.table-block table tr td:first-child { padding: 0; background-color: transparent; border-width: 0 }

2019-01-31 公式のスタイル変更があったぽいので対応

2019-04-16 追記しました