啓用HTML表格上的垂直滾動

我正在創建一個表並使用javascript填充它。我想向表中添加一個垂直滾動條，但是僅對數據添加一個垂直滾動條，即我希望表頭保持固定，即不包含在滾動條中。啓用HTML表格上的垂直滾動

我只想使用javascript，CSS和有效的HTML5元素。在這個階段，我想排除jQuery。關於這個主題已經有很多討論，通常包括水平滾動條。我只對垂直滾動感興趣，對我來說滾動時必須將表頭數據與表格數據對齊。討論和我嘗試實現這個目標，導致我相信這是不可能的。如果情況並非如此，有人可以告訴我這是怎麼完成的？

到目前爲止，我已經做了許多嘗試。添加

 table { 
      display: block; 
      height: 300px; 
      overflow: scroll; 
     }

導致整個表的垂直滾動，包括標題和數據，但標題和數據是對齊的。添加 thead {display：block; } tbody {display：block; height：300px; 溢出：滾動; } 導致標題不滾動，但標題和數據列不再對齊。看起來發生的情況是標題列的寬度不再考慮數據列。

我已經嘗試了許多其他方法沒有成功。根據報頭和數據值的最大字段大小（以字符爲單位），將相同的寬度值添加到標題和數據字段列，我取得了部分成功。通過這種方法，我可以使標題與大多數列的數據保持一致。然而，我並不認爲這是一個適當的解決方案，因爲通常不可能或者至少非常困難地確定一個em，px或者mm的值，這個值將精確地保存n個字符。

在我看到的討論中，似乎我想用jQuery實現。我還沒有接受jQuery，但如果它可以輕鬆地啓用我想要的，那麼可能是時候這樣做了。任何人都可以確認，如果我想在jQuery中可能嗎？

我覺得很難相信我想要做的事情是不容易的，因爲我認爲它是任何適當處理表格的基礎。

來源

2013-10-01 Chris Close

不幸的是，這是非常**非平凡。它不應該是，你會認爲我們可以說「滾動tbody'元素，」但遺憾的是沒有。你可能會想要使用任何幾個表插件，而不是自己寫。 –

您能否在[jsfiddle]（http://jsfiddle.net/）中提供示例HTML輸出？ – Bill

也許不是你正在尋找的答案，但一個相當簡單的解決方案是將所有可滾動的行和列放在一個可滾動的div內，並將頁眉和頁腳保持在該div之外。

來源

2013-10-01 13:01:26 stafffan

按照要求我設置了一個例子[jsfiddle]（http://jsfiddle.net/fJPEa/）。 –

按照要求我設置了一個例子[jsfiddle]（http://jsfiddle.net/fJPEa/）。這包括Bradley Trager提出的使用顯式列寬的建議。我已經嘗試過，並在我的原始屏幕上使用javascript設置了這些寬度。然而，我並不認爲這是一個可行的解決方案：a）它很複雜，b）它是不穩定的，因爲幾乎不可能讓列的大小適合於保存字段和一些小改動，例如更改標題字體大小，會打破它。 –

如果您願意將列設置爲固定寬度，則基本上可以製作兩個表格 - 一個用於標題，另一個用於主體，然後設置滾動至主體。

HTML：

<table class="header"> 
    <thead> 
     <td>Header</td><td>Header</td><td>Header</td> 
    </thead> 
</table> 
<table class="body"> 
    <tbody> 
     <tr><td>data</td><td>data</td><td>data</td></tr> 
     ... 
    </tbody> 
</table>

而且你的CSS：

td, th{ 
    width:50px; 
} 
table.body{ 
    display: block; 
    height: 300px; 
    width:200px; 
    overflow: scroll; 
}

看到這個jsFiddle。

來源

2013-10-01 13:11:54

我不認爲這是很好的做法 – idmean

啓用HTML表格上的垂直滾動

回答

相關問題