Я использую таблицу для отображения табличных данных, но мне нужно получить точный размер, чтобы содержимое не занимало больше места по вертикали, чем у меня есть.Кроме того, компоновка с использованием одной только css невозможна, потому что у меня десятки элементов.
Вот мой простой тестовый код:
<!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>
По сути, я хочу, чтобы строка таблицы занималатолько 16px, однако, в этой конфигурации он в итоге занимает 17px.
При проверке элементов в FireBug он показывает интервал в 15px, но td и tr в 17, но без отступов, без границ и т. д ...
В IE я получаю то же самое поведение, однако есть немного больше информации о моем таинственном дополнительном пикселе или двух, кажется, есть смещение на элементе span:
Наконец, я могу решить проблему, превратив мой элемент span в div, (или сделав элемент span display display: block или даже display: table-cell, который я наденуне очень понимаю).Поэтому мне действительно не нужна помощь в решении моей проблемы, но я хочу понять, почему встроенные элементы в ячейках таблицы в итоге занимают больше места, чем они должны.Я пробовал гугл и спецификацию w3c, но не смог найти ничего полезного.