在涉及的项目中,我需要使用特定宽度的列来呈现表,每个表行只有一行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？如果那么,它是什么？
有没有办法在不使用表的情况下获得所需的结果？
解决方法
不幸的是,表元素不尊重溢出,因此您需要将其应用于子元素.
编辑：我可能已经说得太快了,因为我可以使用max-width在FF中创建这个效果,我发现this thing可能适用于IE.你每天都学到一些东西.
edit2：是的,它至少适用于IE7,但有一个严重的警告,你不能在文本中有空格,它们必须转换为& nbsp;.我认为你应该坚持使用< div>为了清洁和兼容性的解决方案.
