html - 有没有办法截断(隐藏)宽表格单元格？

Question

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

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

第二个单元格(在中间)包含一个包含许多单元格和不同长度/宽度的表格。我们称这个表为“内容表”

所以它看起来像这样;

[first cell] | [content1|content2|content3|content4] | [last cell]

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

最后，我需要类似“溢出:隐藏”的东西，但这在表格单元格中不起作用。 (好像不行？)

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

我从昨天开始就在研究这个问题——一无所知!

希望在这里得到任何形式的帮助。

Answer 1

参见: http://jsfiddle.net/thirtydot/YRgwB/6/

• 我添加了 width:100%; table-layout:fixed; 到你的外部 table。
• 我用 overflow: hidden 包裹了一个 div 在您的“宽表”周围。
• 这适用于所有现代浏览器。

<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>