В проекте, в котором я участвовал, мне нужно было визуализировать таблицы с столбцами определенной ширины только с одной строкой HTML в строке таблицы (без обертывания). Мне нужна каждая ячейка таблицы для заполнения 1 пикселя сверху и снизу и 2 пикселя слева и справа. Лучший способ, которым я могу придумать этот кросс-браузер, - разместить div внутри td внутри таблицы следующим образом:
<style>
table.grid { border: none; border-collapse: collapse; }
table.grid tbody tr td { padding: 1px 2px; }
table.grid tbody tr td div { overflow: hidden; white-space: nowrap; }
table.grid tbody tr td.one { width: 100px; }
table.grid tbody tr td.two { width: 200px; }
</style>
<table class="grid">
<tbody>
<tr>
<td class="one"><div>One</div></td>
<td class="two"><div>Two</div></td>
</tr>
<tr>
<td class="one"><div>Another One</div></td>
<td class="two"><div>Another Two</div></td>
</tr>
</tbody>
</table>
Мне бы хотелось убрать возможность добавить дополнительный div. Я потратил много часов на поиск этой проблемы, но не нашел альтернативы.
Есть ли способ сделать то, что мне нужно, без необходимости добавлять дополнительный div? Если так, что это такое?
Есть ли способ получить желаемый результат без использования таблиц вообще?