html – 使用CSS创建特定宽度的表格单元格,没有自动换行

在涉及的项目中,我需要使用特定宽度的列来呈现表,每个表行只有一行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>为了清洁和兼容性的解决方案.