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

Question

在一个涉及的项目中,我需要使用特定宽度的列来呈现表,每个表行只有一行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？如果那么,它是什么？

有没有办法在不使用表的情况下获得所需的结果？

Answer 1

不幸的是，表元素不考虑溢出，因此您需要将其应用于子元素。

编辑：我可能说得太早了，因为我可以使用 FF 在 FF 中创建这种效果，max-width并且我发现这个东西可能适用于 IE。你每天都会学到一些东西。

edit2：是的，它至少适用于 IE7，但有一个严重的警告，文本中不能有空格，它们必须转换为 . <div>我认为为了清洁和兼容性，您可能应该坚持使用该解决方案。