HTML

2013-03-01, html

テーブルのセルを隙間なく並べる

ページ全体のレイアウトにテーブルを使うことは無くなったとはいえ、やはり行と列を意識してデータを並べたいときにはテーブルが便利です。このテーブルのセルを隙間なく並べたい場合に、(paddingやborderなど一般的なものは省略すると)以下のようなスタイル指定が必要です。特に分かり辛いのが、imgのvertical-align指定で、これを書かないと、imgタグが最下行にある場合、その下に僅かなスペースが空いてしまいます。

table.foo{
    border-collapse: collapse;
    border-spacing: 0;
}

table.foo img{
    vertical-align: bottom;
}

参考URL

この記事は役に立ちましたか?