1

我发现了一个烦人的情况：如果我有一个嵌套在 div 内的表格overflow: auto（或overflow: none或overflow: scroll就此而言），并且表格的宽度超过了窗口的宽度，潜水将切断表格并添加滚动条......正如它应该。

但是，如果我采用完全相同的场景并将其放入（另一个）表中，那么该overflow属性突然不再受到尊重。

作为我的意思的一个例子，这是一个工作案例：

<div style="border: 1px solid green; overflow: hidden">
    <table><tr><td><div style="border: 1px solid red; width: 9999px;">a</div></td></tr></table>
</div>

如果你在浏览器中查看它，你会在右侧看到一个绿色边框，但不是红色边框，因为 div 隐藏了表格的溢出，所以你看到的只是它的边框。

将其与包含在表格中的完全相同的代码进行比较：

<table><tr><td>
    <div style="border: 1px solid green; overflow: hidden">
        <table><tr><td><div style="border: 1px solid red; width: 9999px;">a</div></td></tr></table>
    </div>
</td></tr></table>

您会看到没有右边框，因为两个元素都溢出了页面；如果您向右滚动得足够远，您将看到两个边框，因为 div 从未限制过它的表格。

我知道这可能是因为 TD 计算其宽度的方式与其他元素不同，因此 TD 内的 div 不能正确溢出，因为它计算 100% 宽度“错误”（虽然不是真的错误，只是在术语上是错误的我想要的）。

鉴于此，谁能帮我弄清楚如何在“表内”的情况下获得正确的溢出行为？

4

3 回答 3

1

只table-layout: fixed;width: 100%在外桌使用

<table style="table-layout: fixed;width: 100%"><tr><td>
    <div style="border: 1px solid green; overflow: hidden">
        <table><tr><td><div style="border: 1px solid red; width: 9999px;">a</div></td></tr></table>
    </div>
</td></tr></table>
于 2020-06-12T07:06:37.457 回答
0

可悲的是，我最终不得不通过移除外部表来解决这个问题（这意味着必须完全修改布局）。不过，我仍然很想听听是否有其他方法...

于 2012-12-04T17:17:45.927 回答
0

只需用另一个 div 包裹桌子。

<div style="overflow: hidden">
<table><tr><td>
    <div style="border: 1px solid green; overflow: hidden">
        <table><tr><td><div style="border: 1px solid red; width: 9999px;">a</div></td></tr></table>
    </div>
</td></tr></table>
</div>
于 2012-11-30T00:44:16.033 回答