水平滾動時保持表格的一列固定，但也垂直滾動

Question

我在滾動div內有一個大表。該表格包含一個人的姓名，後面跟着他的詳細信息。我需要表格的第一列在水平滾動時保持固定，以便在查看他的詳細信息時該人員的姓名保持可見。與此類似：HTML table with horizontal scrolling (first column fixed)

但是，我的表格在y方向上也很大，所以當我向下滾動時，此人的名字也應該隨其細節一起向上滾動。 This幾乎可以解決我的問題，但不是垂直滾動。

請幫忙！

Answer 1

對於垂直滾動，問題是保持頁眉和頁腳不變。做到這一點的最好方法是實際上有三個表格 - 一個用於標題，一個用於數據（可滾動的DIV），另一個用於頁腳。如果表格列的寬度是固定的，那麼這就是你需要做的。如果他們不是，那麼你需要使用JavaScript來調整它們。但是這裏有一個技巧 - 具有AUTO列寬度的表格不能保證使用在JS中指定的寬度，特別是如果列爲空，或者標題文本項目很長。

我已經通過設置基於數據的標題寬度來處理此問題，查找瀏覽器是否調整大小，然後更改數據寬度。一旦它們靠近，我將表格設置爲FIXED模式進行最終調整。

看一看這裏：

http://hifi.goneill.co.nz/cd.php

點擊爵士，古典等按鈕看錶。還請閱讀技術說明頁面，因爲它描述了編碼並試用了Ajax版本。

對於你的固定列，你可以做類似的事情：有兩個表並使用其中一個的offsetTop設置另一個的scrollTop。查看我的表如何在排列具有空行的列時對頂部行進行排序，或者在切換標籤頁時保存並恢復Ajax版本中的當前行。

Answer 2

我試圖解決固定列問題，其中一個表是在其他DIV控件內。在解決這個問題時，我遇到了同樣的問題，並通過在「onscroll」事件中在ScrollTop屬性中設置容器來找到解決方案。我申請以下風格的容器：

.floatingStyle 
{ 
    position:relative; 
    background-color:#829DC0; 
    top:0px; 
} 

你可以在這裏看完整的解決方案：http://rajputyh.blogspot.in/2011/12/floatingfixed-table-header-in-html-page.html 有哪些還沒有處理幾個瀏覽器相關的問題。