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

Question

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

• 所有列的宽度必须可变
• 所有列的宽度不得超过必要的宽度
• 所有单元格必须保留空格（white-space：pre / pre-wrap）
• 当（且仅当）超过最大定义宽度（1000像素）时，所有单元格都必须换行

我在完成规则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>，并给它设置了number_of_columns * max_column_width的宽度，实际上是所有列均超过阈值时表将具有的最大宽度。

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

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

不太优雅，但是确实可以。