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>

使HTML表格展开以保存没有包装的内容

1 个答案: