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

Question

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

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

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

所以它可能看起来像这样；

[第一个单元格] | [内容1|内容2|内容3|内容4] | [最后一个单元格]

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

最后，我需要像“溢出：隐藏”这样的东西，但这在表格单元格中不起作用。 （好像不行？）

我有一个小 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>