html - How can I prevent this div in my table from increasing the cell height? -
html - How can I prevent this div in my table from increasing the cell height? -
i have illustration of problem here: http://jsfiddle.net/s6t3p/
i have next markup:
<h1>just text</h1> <table> <tr> <td class='cell'>some text</td> <td class='cell'>more text</td> </tr> </table> <h1>with icon cell</h1> <table> <tr> <td class='cell'>some text</td> <td class='cell-ico'><div class='ico'></div></td> <td class='cell'>more text</td> </tr> </table>
and next css:
table,td,tr { margin: 0; padding: 0; border: none; outline: none; font-size: 100%; font: inherit; vertical-align: baseline; } table { border-collapse: collapse; border-spacing: 0;} .cell { border:solid 1px #ddd; padding:0 5px; text-align:left; line-height:27px; } .ico {width:24px; height:24px; background:#05f;}
i wish each cell 27px in height. case 1st table. sec table contains cell 24px div has height of 32px. don't understand why. seems 24x24 div should fit within fine without increasing cell height.
can explain why happening , how prepare can maintain cells @ height of 27px? testing firefox 29.
thanks help.
if looking display tabular data, way go :)
the behaviour caused vertical-align: baseline;
.
just reset vertical-align
.cell-ico
, provide set height. give .ico
height of 100%.
have fiddle
.cell-ico { height: 24px; vertical-align: top; } .ico { width:24px; height: 100%; background:#05f; display: block; }
html css css3
Comments
Post a Comment