使 HTML 表格展开以容纳不换行的内容答案

【问题标题】：Make HTML table expand to hold contents with no wrapping使 HTML 表格展开以容纳不换行的内容
【发布时间】：2016-05-23 17:47:14
【问题描述】：

我有一个当前是 100% 窗口宽度的表格。

示例结构：（为清晰起见，删除了 CSS/样式）

   <table>
      <tbody>
        <tr>
           <td>Row ID</td>
           <td><div>Some content</div><div>Another</div>...and so on
        </tr>
      </tbody>
   </table>

在每行的第二个表格单元格中是包含文本行的 DIV。在渲染表格的那一刻，DIV 元素会流到表格的边缘，然后在它们放不下时换行。

我需要的是这些 DIV 元素保持在一行中流出屏幕。我可以通过手动将表格宽度设置为较大的值来模拟，例如400%，但这通常太宽了。我需要一种方法来使表格扩展以包含最宽的行但不更大。使用 white-space: nowrap 只会将文本换行在每个 DIV 中。

有没有办法用 CSS 做到这一点？

【问题讨论】：

喜欢这个jsfiddle.net/Lg0wyt9u/887 ?
我不明白你在问什么。如果您只想将 div 放在一行中，则可以使用 display:inline;关于表格扩展到最宽的行，但不会更大。这不是默认行为吗？
@NenadVracar 完美。你想发布你的小提琴作为答案吗？
@Kake_Fisk 表格会展开以适应窗口，然后即使使用 display:inline，内容也会换行。它还需要 td 上的 white-space:nowrap 。我尝试了很多组合，我需要一个明确的答案。

标签： html css

【解决方案1】：

您可以在div 上添加display: inline-block 和在td 上添加white-space: nowrap

table {
  width: 100%;
}
td {
  border: 1px solid black;
  white-space: nowrap;
}
div {
  display: inline-block;
}

<table>
  <tbody>
    <tr>
      <td>Row ID</td>
      <td>
        <div>Some content</div>
        <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia, magnam!</div>
        <div>Another</div>
        <div>Another</div>
        <div>Another</div>
    </tr>
  </tbody>
</table>

【讨论】：

谢谢！我还必须在 div 中添加 white-space: normal 以使其像以前一样呈现。