使用 CSS 创建特定宽度的表格单元格，无需自动换行答案

【问题标题】：Using CSS to create table cells of a specific width with no word wrapping使用 CSS 创建特定宽度的表格单元格，无需自动换行
【发布时间】：2010-09-29 19:20:53
【问题描述】：

在一个项目中，我需要渲染具有特定宽度列的表格，每个表格行只有一个 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 的情况下做我需要的事情？如果有，那是什么？

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

【问题讨论】：

您应该将“grid”类添加到示例 HTML 中的表格中，以使其与示例 CSS 匹配
为什么需要 div？ td 毕竟是块元素。
Gareth，谢谢，为表格类添加了网格。 cletus，我试过溢出：隐藏；空白：nowrap；到 td 并且它不起作用。

标签： html css cross-browser css-tables

【解决方案1】：

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

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

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

【讨论】：

哇，感谢您的链接和 cmets。我会坚持我所拥有的，但由于你的回答，我受到了更多的教育。谢谢。
链接失效了，所以习惯性的在这里贴出相关内容。

【解决方案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中可以看到：

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

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

【讨论】：

鉴于规格。没有为表格单元格定义，不建议使用max-width:stackoverflow.com/questions/8465385/…...不管能不能。

【解决方案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>

【讨论】：

感谢您的快速回复。我试过使用溢出：隐藏；空白：nowrap；在 td 但它似乎不工作跨浏览器。
为什么 addign 裸跨度会做任何事情？更不用说改进添加 div 了？

【解决方案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>

【讨论】：