table内の横並びの要素の高さをそろえる!
左側のtdのバックグラウンドカラーを変えたい
よくあるtableのデザインとして、左側のtdのバックグラウンドカラーを変更しているケースが有りますね。これを実装する際、横並びになっているtdの高さが違うとカラーリングがうまいこといかないケースが有ります。具体的には、カラーリングしたいセルのバックグラウンド全体がきちんと染まってくれません。
そんなとき活躍するプロパティは、
display:table-cell
です。これをtdに設定してあげると高さが揃います。(少々無理矢理な感じがありますが・・。)
また、セルの間に隙間があいているのが気になるときは、
tableへborder-spacing:0px;を設定してあげます。