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

Question

我有一个当前为窗口宽度 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 做到这一点？

Answer 1

您可以display: inline-block不断div地white-space: nowrap添加td

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>