html - 强制可变宽度表格列内容以最大宽度换行*仅*

Question

我有一个具有以下要求的表:

• 所有列的宽度必须可变
• 所有列的宽度不得超过必要的宽度
• 所有单元格必须保留空白(white-space:pre/pre-wrap)
• 当(且仅当)超过最大定义宽度 (1000px) 时，所有单元格必须换行

我无法完成规则 #4。

只要表格的整个宽度适合屏幕，就没有问题。但是，当超出可用空间时，浏览器将尽一切努力通过比我预期的更早换行来使其适合。较小的列的宽度也会减小并开始换行。

CSS:

table {
    width: auto;
}

table td {
    max-width: 1000px !important;
    white-space: pre-wrap;
    word-break: break-word;
    word-wrap: break-word;
}

HTML:

   <table border="1">
      <tr>
        <td>Small text, should not wrap</td>
        <td>Long text, should wrap at 1000px only; [...]</td>
      </tr>
    </table>

请检查这个JSFiddle

我正在使用 white-space:pre-wrap，因为内容必须能够换行，即使原始数据不包含换行符。当我使用 white-space:pre 时，列宽完全正确，但显然内容会溢出到单元格之外。我试图通过添加 overflow-wrap:break-word 来克服这个问题，但这没有用..

Answer 1

显然，对此没有纯 CSS 解决方案。与此同时，我找到了一个可靠的变通方法，其中包含一些 html 和 javascript。

我放了一个 <div>在 table 周围，并给它一个宽度 number_of_columns * max_column_width ，本质上是所有列都超过阈值时表格的最大宽度。

这导致表格按照我预期的方式呈现，但这显然会导致水平滚动条超出呈现的表格。因此我需要减少 <div> 的宽度到渲染表格的实际宽度。

div.style.width = table.offsetWidth + 'px';

不是很优雅，但它完成了工作。