如何製作比屏幕尺寸更寬的表格，可滾動並保持標題行的固定？

我有一個table與2列，每列是800px寬。我想在800x50窗口中顯示此表格。所以應該有水平和垂直滾動條來查看完整的表格。如何製作比屏幕尺寸更寬的表格，可滾動並保持標題行的固定？

雖然我在SO上找到了一些相關的解決方案（this和this），但它們只在表格寬度小於屏幕尺寸時才起作用。在我的情況下，屏幕尺寸是1200px，表格總寬度是1600px。

我該怎麼做？我想實現類似this。

編輯糟糕，我忘了添加一個更多的要求。抱歉。我希望表格的標題在用戶滾動表格時保持固定。

EDIT2

我已經試過下文提到的解決方案，在一個div包裹，但在這種情況下，垂直滾動條顯示不出來。請參閱this table與包裝div。看起來這個問題只發生在表格寬度大於屏幕尺寸的情況下。我正在測試FF3.6。

EDIT3

當前table代碼。即使我可以垂直滾動，也沒有垂直滾動條。

<div style="overflow:scroll; width:800px;height:50px" > 
<table style="width:1600px" border="1"> 
    <thead> 
    <tr> 
     <th style="width:800px">id_1</th> 
     <th style="width:800px">id_1</th> 
    </tr> 
    </thead> 
    <tbody style=""> 
    <tr><td>1200</td><td>1200</td></tr> 
    <tr><td>1200</td><td>1200</td></tr> 
    <tr><td>1200</td><td>1200</td></tr> 
    <tr><td>1200</td><td>1200</td></tr> 
    <tr><td>1200</td><td>1200</td></tr> 
    <tr><td>1200</td><td>1200</td></tr> 
    </tbody> 
</table> 
</div>

來源

2010-04-13 understack

我很抱歉，但800x50是不可用的維度。單獨的滾動條大約需要20px，這會讓你玩大約30px ...所以你要求你的用戶每次滾動顯示一行或兩行？當然你不是指800x500？ – Robusto 2010-04-13 18:42:03

這些都是假的數字，我只是想讓這張表工作，然後相應地更改尺寸。 – understack 2010-04-13 18:44:20

您可以將表格換成固定大小（800x50）並設置爲overflow:scroll的div。

來源

2010-04-13 18:38:59

@Vivin Paliath：當表格長度大於屏幕尺寸時，我看不到垂直滾動。請參閱：http://jsbin.com/uwubu3/3 – understack 2010-04-13 18:52:18

我打開它時看到滾動條很好。你的意思是窗口大小？如果表格大於窗口大小，則需要滾動整個頁面才能看到滾動條。沒有辦法解決這個問題，然後根據窗口大小調整表格大小。 – 2010-04-13 19:36:56

我也沒有看到滾動條，但我相信那是因爲你的身高很小。嘗試將您的高度設置爲100px，並且它會正常工作。 – 2010-04-13 20:01:14

把你的表與寬度< 800一個div，並設置overflow: scroll。

來源

2010-04-13 18:38:44

我不知道它是否會起作用，但是您是否嘗試過爲該頁面設置max-width: 100%？

來源

2010-04-13 18:40:13 animuson

只需將overflow:scroll添加到表格元素的CSS中即可。順便說一句。你的例子不顯示任何滾動。

來源

2010-04-13 18:41:11

@Paul de Vrieze：修正了這個例子。現在它顯示滾動，但只有水平。 – understack 2010-04-13 19:12:11

如果你想在頭保持固定你只是做一些CSS

#header { 
    position:fixed; 
    left:0; 
    top:0; 
}

來源

2010-04-13 18:58:23 Catfish

如何製作比屏幕尺寸更寬的表格，可滾動並保持標題行的固定？

回答

相關問題