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%减去所有其他列的宽度(自动调整大小).它还需要a 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它们).

jsFiddle:http://jsfiddle.net/jLX4q/