使用`overflow-wrap:break-word`自动列宽

html5 • • 问答

我有一个包含 3 列的 HTML 表 - ID、时间戳和数据。ID 和时间戳非常窄，数据可能非常大，有时它没有换行符，以避免我设置的水平滚动条overflow-wrap: break-word。为了使它工作，我需要将我table-layout的fixed.

虽然它有效，但我不喜欢所有列现在都具有相等的宽度。我可以将前两列大小设置为某个固定宽度，但我希望它们适合内容。如何强制前 2 列调整其宽度，第三列占用剩余空间？

这是我的代码示例：

<table>
  <tr>
    <th>ID</th>
    <th>Time</th>
    <th>Data</th>
  </tr>
  <tr>
    <td>0</td>
    <td>10:11</td>
    <td>some_long_value_that_may_or_may_not_contain_a_space</td>
  </tr>
  <tr>
    <td>1</td>
    <td>10:12</td>
    <td>some_long_value_that_may_or_may_not_contain_a_space</td>
  </tr>
  <tr>
    <td>2</td>
    <td>10:13</td>
    <td>some_long_value_that_may_or_may_not_contain_a_space_and_it_may_be_so_long_that_it_wont_fit_into_the_column_and_needs_to_be_wrapped</td>
  </tr>
</table>
以上是使用`overflow-wrap:break-word`自动列宽的全部内容。
THE END
分享
二维码
< <上一篇
下一篇>>
相关内容