CSS table > td - 强制内容到一行跨浏览器答案

【问题标题】：CSS table > td - force content to one line cross-browserCSS table > td - 强制内容到一行跨浏览器
【发布时间】：2021-01-27 14:20:05
【问题描述】：

这适用于 Chrome/Edge：

<style>
  .o {
    width: 1px;
    white-space: nowrap;
  }
</style>

<table style="width:100%; position: relative; border-collapse: collapse">
  <tr>
    <td class="o">text no wrap</td>
    <th>Head</th>
    <td class="o">text no wrap</td>
  </tr>
</table>

white-space: nowrap; ... 停止换行

width: 1px; ... 自动将内容扩展到所需的最小宽度

这是问题所在：

Internet Explorer： 自动扩展宽度不起作用。（客户仍然使用它们，虽然我不喜欢 ie）

所以如果设置了宽度，就会有一个换行。没有宽度 tds 会很大（空白），因为缺少对内容的最小化。

跨浏览器：如果内容太大，不换行，它会将表格宽度扩大到 100% 以上。最好是“仅在真正需要时才进行包装”。

附加信息：我不能使用固定布局，因为内容是从数据库中填充的

【问题讨论】：

它似乎在我的所有浏览器中都能正常工作。即表示：width: 79.98px当您检查并检查计算值时。所以自动扩展适用于 ie 11
如果我在 ie 11 中尝试，那么每个空格都会包含“text no wrap”...
不，我们没有相同的 html。我的增量正确，doctype，html > head > style，body > table。不要指望 IE 将元素设置在好的位置，您应该是正确设置它们的人，正如我在回答中所做的那样。你的 html 是错误的（删除这个答案并用图片编辑你的帖子）
你是绝对正确的。插入“”就可以了。非常感谢！

标签： html css internet-explorer

【解决方案1】：

您需要尊重 IE 中的 HTML 结构。而不仅仅是随机设置您的样式和表格。

对我来说，它似乎在所有浏览器中都以同样的方式工作。即表示：width: 79.98px 当您检查并检查计算值时。所以自动扩展适用于 ie 11

你可能有更多的 css 或 html，但就像你给的一样。 IE11 正在根据捕获完成工作：

【讨论】：