4
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

table内、横並びの要素の高さをそろえる!

Posted at

table内の横並びの要素の高さをそろえる!

左側のtdのバックグラウンドカラーを変えたい

 よくあるtableのデザインとして、左側のtdのバックグラウンドカラーを変更しているケースが有りますね。これを実装する際、横並びになっているtdの高さが違うとカラーリングがうまいこといかないケースが有ります。具体的には、カラーリングしたいセルのバックグラウンド全体がきちんと染まってくれません。

そんなとき活躍するプロパティは、
display:table-cell です。これをtdに設定してあげると高さが揃います。(少々無理矢理な感じがありますが・・。)

また、セルの間に隙間があいているのが気になるときは、

tableへborder-spacing:0px;を設定してあげます。

4
4
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?