如何讓CSS屬性在嵌套表上工作？

Question

我發現了一個令人討厭的情況：如果我有一個嵌套在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％寬度「錯誤」（儘管並不是真的錯，就我想要的而言只是錯誤的）。

鑑於這一點，任何人都可以幫助我弄清楚如何在「在表內」的情況下獲得適當的溢出行爲？

Answer 1

不幸的是，我卷繞具有通過去除外部表（其指的是具有修補完全佈局）來解決這個問題。我仍然喜歡聽到，如果有另一種方式，雖然...

Answer 2

只需將表格換上另一個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>