【CSS】html5でtable内に隙間無く画像を敷き詰める方法
html5でtable内にサイズがバラバラの画像を隙間なく敷き詰めたい場合のCSSのメモ。
|
1 2 3 4 |
table{border-collapse:collapse;border-spacing:0;} th,td{margin:0;padding:0;} |
CSSに当初このように記述してみたが、画像のサイズがバラバラだった為、どうしても隙間ができてしまった。
そこで、上記のコードに
|
1 |
table img{vertical-align:top;} |
もしくは
|
1 |
table img{vertical-align:bottom;} |
を追加してみたところ、隙間がなくなることが判明。
※iOSなどブラウザによっては表示がくずれる可能性あり