如何使溢出CSS属性在嵌套表上工作？

我发现了一个恼人的情况：如果我在一个div中嵌套了一个带有

overflow:auto

（或者

overflow:none

或者

overflow:scroll

）的表，并且该表的宽度超过了窗口的宽度，那么该dive将切断该表并添加滚动条。。。应该如此

但是，如果我采用完全相同的场景并将其放入（另一个）表中，则会突然停止使用

溢出

属性

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

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

A.

如果您在浏览器中查看它，您将在右侧看到一个绿色边框，而不是红色边框，因为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>

A.

您将看到没有右边框，因为两个元素都从页面溢出；如果向右滚动足够远，您将看到两个边框，因为div从未约束其表

我知道这可能是因为TDs计算的宽度与其他元素不同，所以TD中的div不能正确溢出，因为它计算的100%宽度是“错误的”（虽然不是真的错误，只是在我想要的方面是错误的）

---

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

只需用另一个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>

A.

只需用另一个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>

A.

遗憾的是，我不得不通过移除外部表来解决这个问题（这意味着必须彻底修改布局）。不过，我还是很想知道是否还有其他方法……

遗憾的是，我最后不得不通过移除外部表来解决这个问题（这意味着必须彻底修改布局）。我仍然很想知道是否还有其他方法……

只需使用

表格布局：修复；宽度：外桌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>

A.

只需使用

表格布局：固定；宽度：外桌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>

A.

如果我想裁剪外部表格，这非常有效。。。但我没有（这只是为页面提供布局）。我只想裁剪内表（如果不是嵌套的话会是这样）。如果我想裁剪外表，那就太好了。。。但我没有（这只是为页面提供布局）。我只想裁剪内部表格（如果不是嵌套的话）。