I use a table to display tabular data, but I need the pixel size to be ideal so that the content does not take up more vertical space than I have. Also, a layout using only css is not possible because I have dozens of elements.
Here is my simple test code:
<!DOCTYPE html>
<html lang="en">
<head>
<style>
table, td, tr, thead, tfoot, tbody, th, tf {
border-collapse: collapse;
margin: 0px;
padding: 0px;
border:0;
line-height:16px;
}
</style>
</head>
<body>
<table border="0" cellspacing="0" cellpadding="0">
<tr style="height:16px">
<td>
<span style="font-size:10pt;">Here is some text</span>
</td>
</tr>
</table>
</body>
</html>
Basically, I want the table row to occupy only 16 pixels, however in this configuration it ends up occupying 17 pixels.
Checking elements in FireBug shows a range of 15px, but td and tr are at 17, but there is no padding, no border, etc.
In IE, I get the same behavior, however there is a bit more information about my mysterious extra pixel or two, it seems that there is an offset on the span element:
, , span div (, span: block display: table-cell, ). , , , . google w3c spec, .