テーブルのセルをわかりやすくする
テーブル記法で書いてて、セルが多くなってきたり、空のセルが増えてきたりすると、
どこにどの値があるのか見えなくなってくるな～と思ったんで、ちょっとスタイルを変えてみた。
2019-04-16 追記
テーブル機能がどんどんアップデートされてるので、ここにあるスタイルは古くて使えなくなってます。
新しいテーブルのスタイルはカスタマイズしなくても見やすいので、今後このページの更新はしないかもです。
サンプル
Habit Tracker
| M | T | W | T | F | S | S | Note | |
| 早起き | × | × | × | × | - | - | - | 朝暗いから |
| 1万歩 | × | ○ | × | ○ | - | - | - | |
| 早寝 | × | × | × | × | - | - | - | 夜長いから |
サンプル（画像）
テーブルのセル間を見えるようにしてみた。
だいたい1行目が見出しなので、太字&中央揃えで表示するようにした。
偶数行が少し濃くなるようにした。
副作用かもしれないけど、セルが不足してるときは背景色が抜けるからすぐわかるよ…。
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 }初出 2017-10-25
2017-11-22 テーブルのセル内で折り返しを別ページに分けた
2019-01-31 公式のスタイル変更があったぽいので対応
2019-04-16 追記しました