html - 使 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

您可以在 div 上添加 display: inline-block 并在 td 上添加 white-space: nowrap/p>

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>