css - Why is my html table taking up more height than necessary? -
i have table bunch of same image in single row. image has height of 21px cells of table have rendered height of 25px (in chrome, safari, , firefox).
there's nothing else in table, , can tell, there no margins, borders, or padding. why table taller needs be?
here's example:
and here's simple example of table:
<table> <tbody> <tr> <td><img src="http://i.imgur.com/b2f5t2b.png"></td> <td><img src="http://i.imgur.com/b2f5t2b.png"></td> <td><img src="http://i.imgur.com/b2f5t2b.png"></td> <td class="datetime"></td> <td><img src="http://i.imgur.com/b2f5t2b.png"></td> <td><img src="http://i.imgur.com/b2f5t2b.png"></td> <td><img src="http://i.imgur.com/b2f5t2b.png"></td> </tr> </tbody> </table>
thanks!
bonus question: there way recreate layout without using table (and without using floats)? again!
by default, image within table gets computed display:table-cell
property.
you should set img { display: block; }
Comments
Post a Comment