Question

我正在尝试实现一个跨越整个浏览器宽度的表。

此表包含3个表格单元格。第一个和最后一个单元格是“固定的”。这意味着：它必须始终可见：浏览器窗口左边界的第一个单元格，浏览器窗口右边界的最后一个单元格。

第二个单元格（位于中间）包含一个包含许多单元格和不同长度/宽度的表格。我们将此表称为“content-table”

所以它看起来像这样;

[第一个细胞] | [content1 | content2 | content3 | content4] | [最后一个单元格]

问题是：“内容表”可能包含大量内容。因为“第一个单元格”和“最后一个单元格”必须始终可见，所以超大的“竞争表”应该部分隐藏。

最后，我需要像“溢出：隐藏”这样的东西，但这对桌面单元格不起作用。（看起来它不起作用？）

我有一个小的jsfiddl来显示问题：http://jsfiddle.net/thirtydot/YRgwB/3/

我从昨天开始就在解决这个问题 - 没有任何想法！

希望在这里有任何帮助。

Answer 1

请参阅： http://jsfiddle.net/thirtydot/YRgwB/6/

我将width:100%; table-layout:fixed;添加到您的外table。
我在你的“宽桌子”周围用div包裹overflow: hidden。
适用于所有现代浏览器。

<table border="1" style="width:100%; table-layout:fixed;">
    <tr>
        <td>first cell</td>
        <td>
            <div style="overflow:hidden; border:1px solid red;">
                <table>
                    <tr>
                        <td style="min-width:90px;">lot</td>
                        <td style="min-width:90px;">of</td>
                        <td style="min-width:90px;">content</td>
                    </tr>
                </table>
            </div>
        </td>
        <td>last cell</td>
    </tr>
<table>

有没有办法截断（隐藏）宽表格单元格？

1 个答案: