使用 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

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

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

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

Answer 2

实际上， 你可以.

通常，该表会占用其所需的空间。如果你给 table 100% 宽度，它将占用 100% 的 和 分享 细胞之间的那个 关于其内容.

表中没有可用空间：在某个时刻，一定有一个单元格占据了剩余空间 一旦其他尺寸已经设置。

要设置单元格的宽度，您需要 给它一个 width 和一个 max-width 到相同的尺寸。对于具有 N 列的表，您可以对 N-1 列执行此操作，最后一列将占用剩余空间。

如果对 N-2 列执行此操作，则没有固定的两列将共享剩余空间。

有了这一切，您可以添加 white-space:no-wrap 和/或 text-overflow:ellipsis 如果你希望。

这是一个图像示例（我的 RSS 阅读器）： https://i.stack.imgur.com/bPpKP.png

还有一个活生生的例子： https://codepen.io/lehollandaisvolant/pen/REVNLy?editors=1100

你可以看到它实际上非常强大。在codepen中，你可以看到：

• 一些单元格的宽度是固定的
• 某些单元格适合其包含的文本
• 一些细胞适合容器

你可以决定每个单元格的行为（只要有一个单元格适合容器）

Answer 3

您不需要在每个表格单元格中嵌套div。以下内容应达到同样的效果。

<style>
  table.grid { border-collapse: collapse; }
  table.grid tbody tr td { overflow: hidden; white-space: nowrap; padding: 1px 2px; }
  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"><span>One</span></td>
      <td class="two"><span>Two</span></td>
    </tr>
    <tr>
      <td class="one"><span>Another One</span></td>
      <td class="two"><span>Another Two</span></td>
    </tr>
  </tbody>
</table>

Answer 4

您也可以简单地用div替换表。

然后你必须在CSS中定义列宽（这可能很难在所有浏览器中工作）。

示例：您的代码将如下所示：

<div class="mainBoxOfTable">
    <div class="Line">
      <div class="ColumnOne">One</div>
      <div class="ColumnTwo">Two</div>
    </div>
    <div class="Line">
      <div class="ColumnOne">another One</div>
      <div class="ColumnTwo">another Two</div>
    </div>
 </div>