CSS：将具有长单元格内容的表限制为页面宽度吗？

Question

使用以下CSS + HTML：

<style>
    div.stuff {
        overflow: hidden;
        width: 100%;
        white-space: nowrap;
    }
    table { width: 100%; }
    td { border: 1px dotted black; }
</style>

<table>
    <tr><td>
        <div class='stuff'>Long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text</div>
    </td></tr>
</table>

这会导致表格增长以容纳整个长文本。（将浏览器窗口缩小，以查看屏幕分辨率是否很高。）

我添加了width: 100%并overflow: hidden指出长文本应该被截断，但似乎忽略了这一点。如何限制表格/表格单元格/
div，使表格的宽度不超过文档的宽度？

（请不要评论使用表的优点。我确实是在显示表格数据，因此表的使用在语义上是正确的。也请不要质疑剪切文本的用户友好性；在那里实际上是一个“扩展”按钮，允许用户查看全部内容。谢谢！）

（编辑：我也尝试max-width过，但无济于事。）

Answer 1

为此，您必须将长文本包装成两个div。外层人position: relative只得到内层人。内部的获取position: absolute，overflow: hidden和width: 100%（这将其限制为表单元格的大小）。

现在，表格布局算法将这些表格单元视为空（因为绝对位置的元素从布局计算中排除了）。因此，我们必须告诉它无论如何都要扩大该列。有趣的是，设置width: 100%相关<col>元素的工作原理是，它实际上不会填充宽度的100％，而是100％减去所有其他列（自动调整大小）的宽度。它还需要一个vertical- align: top，否则（空）外部div会居中对齐，因此绝对定位的元素将偏离半行。

这是一个完整的示例，其中有一个三列，两行的表，显示了此工作方式：

CSS：

div.outer {
    position: relative;
}
div.inner {
    overflow: hidden;
    white-space: nowrap;
    position: absolute;
    width: 100%;
}
table {
    width: 100%;
    border-collapse: collapse;
}
td {
    border: 1px dotted black;
    vertical-align: top;
}
col.fill-the-rest { width: 100%; }

HTML：

<table>
    <col><col><col class="fill-the-rest">
    <tr>
        <td>foo</td>
        <td>fooofooooofooooo</td>
        <td>
            <div class='outer'>
                <div class='inner'>
                    Long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text
                </div>
            </div>
        </td>
    </tr>
    <tr>
        <td>barbarbarbarbar</td>
        <td>bar</td>
        <td>
            <div class='outer'>
                <div class='inner'>
                    Some more long text Some more long text Some more long text Some more long text Some more long text Some more long text Some more long text Some more long text Some more long text Some more long text Some more long text Some more long text Some more long text Some more long text Some more long text Some more long text Some more long text Some more long text
                </div>
            </div>
        </td>
    </tr>
</table>

在此示例中，前两列将具有最小可能的大小（即，空格会使它们包装很多，除非您也添加white-space: nowrap它们）。