tbody td邊界不滾動內容在tbody overflow：auto;

我無法獲得這些td的邊界，以便在滾動瀏覽這個溢出時跟隨它們的行：auto; <tbody>。任何想法修復？tbody td邊界不滾動內容在tbody overflow：auto;

注意：設置表格的佈局：固定或使行顯示：塊並不像行會失去流動性的選擇..

你可以看到最新的Firefox問題，所以我認爲它在其他地方搞砸了。

下面是測試我的設置（滾動至底部演示）： http://www.webdevout.net/test?01y

HTML：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html lang="en"> 
    <head> 
    <title>Test</title> 
    </head> 
    <body> 
    <table> 
    <thead><th>One</th><th>Two</th><th>Three</th></thead> 
    <tbody> 
<tr><td>Item</td><td>Item</td><td>Item</td></tr> 
<tr><td>Item</td><td>Item</td><td>Item</td></tr> 
<tr><td>Item</td><td>Item</td><td>Item</td></tr> 
<tr><td>Item</td><td>Item</td><td>Item</td></tr> 
    </tbody> 
    </table> 
    </body> 
</html>

CSS：

table {width:100%;border-collapse:collapse;} 
tbody {height:200px;overflow:auto;} 
td {border-bottom:1px solid #f00;}

來源

2010-05-17 tester

您是否真的必須在問題的代碼中寫下所有表格的行？！順便說一句，它適用於IE7。 – 2010-05-17 21:41:02

對不起，我刪除了多餘的tr .. – tester 2010-05-17 21:48:56

僅供參考，在我的答案中添加了一些解決方法。 – Andrew 2010-06-04 18:21:47

也不起作用在IE瀏覽器。 This對它進行了很好的總結：「按照CSS 2.1規範11.1.1節的定義，溢出屬性不適用於錶行組對象。」

這裏有幾個解決方法，詳見this recent question on SO。 link from the OP有兩個有趣的解決方案，如果你不能改變輸出，第一個解決方案可能適用於你。它基本上涉及將表格封裝在兩個div中，將內部div設置爲溢出：auto，並且將thead相對於外部div絕對定位，以便將其從內部容器中拉出。

來源

2010-05-17 21:41:31 Andrew

我知道這種方法的跨瀏覽器問題。我試圖找出爲什麼邊框不在Firefox 3.6中滾動。 – tester 2010-05-17 21:46:58

僅供參考：它適用於IE7。它在FF 3.6中不起作用，它在Safari 4.0.4中起作用。很奇怪。 – 2010-05-17 21:51:34

我的觀點是，邊框不滾動，因爲它不應該工作（根據規範）。事實上，它在所有這一切都是奇怪的行爲... – Andrew 2010-05-18 13:55:25

不知道爲什麼在FF中出現時髦行爲，但解決方案是創建兩個表並將第二個表放入div中。

HTML：

<table> 
<thead> 
    <th>One</th><th>Two</th><th>Three</th> 
</thead> 
</table> 
<div> 
<table> 
    <tr><td>Item</td><td>Item</td><td>Item</td></tr> 
    <tr><td>Item</td><td>Item</td><td>Item</td></tr> 
    <tr><td>Item</td><td>Item</td><td>Item</td></tr> 
</table> 
</div>

CSS：

table {width:100%;border-collapse:collapse;} 
div {height:200px;overflow:auto;} 
th {width:33%;} 
td {border-bottom:1px solid #f00;width:33%;}

我添加特定寬度的部份和TDS確保列排列，因爲他們在不同的表，但你可能沒有指定。

來源

2010-05-17 22:01:58 mVChr

有趣的解決方法，但是當表由外部來源填充時，編輯html結構通常不是一種可能性（例如drupal查看錶輸出）。另外，我相信這會損失細胞流動性以及細胞和細胞之間的寬度同步，這將成爲無法實現的選擇。 – tester 2010-05-17 22:08:37

tbody td邊界不滾動內容在tbody overflow：auto;

回答

相關問題