CSS:如何使列的宽度与最长文本一样宽

Question

我在看完这篇文章没有成功后打开了这篇文章：如何将表格列宽设置为最长值，不包括标题

我想画一个表格，我希望每列的宽度都与此列中的最长文本兼容。例如，如果以下值位于 A 列中："abc"、"abcd"、"abcde"，则 A 列的宽度将为 5 个字符长。

我试过了：

td {
  white-space: nowrap;
  overflow: hidden;
}

我该怎么做？

Answer 1

我认为这是表的默认行为。制作了一个简单的表，它只是按照你想要的方式运行(参考这个JSFiddle(。列宽等于其中最长的文本。

<table>
  <thead>
    <th>Column A</th>
     <th>Column B</th>
  </thead>
  <tbody>
    <tr>
      <td>abc</td> <td>abcdefghijklm</td>
    </tr>
    <tr>
       <td>abcdefghijklmno ddsp</td>  <td>ab</td>
    </tr>
     <tr>
       <td>ab</td>  <td>ab</td>
    </tr>
  </tbody>
</table>

不确定您是否想问其他问题？

Answer 2

将此样式添加到您的表格和 td：

table {
    table-layout:fixed;
}
td {
    width:1px;
    white-space:nowrap;
}

如果这不起作用，请确保这些是设置为表和 td 的唯一样式属性。这将帮助您确定其他样式属性是否会导致冲突，从而破坏您想要实现的上述样式。

在我身上发生的类似问题上，这些样式属性对我不起作用，因为我正在使用它们将width属性设置为表。当我删除它时，一切都按预期运行良好。

我从原始帖子中得到解决方案的引用：

如果文本是非自动换行文本，则将单元格设置为 width:1px 并使用 white-space:nowrap 。然后，该列中的文本将确定单元格的宽度。

这是一种通常用于图像和标题(不带white-space:nowrap(的技术，并允许文本自动在图像的限制处换行。

Answer 3

尝试设置文本样式以使其不换行：

{
      white-space: nowrap;
      overflow: hidden;
}

并且不要在表格、tr 和 td 元素上设置宽度设置。

看看这是否有效。