如何在HTML表格上覆制「凍結窗格」功能？

我在爲我的工作開發的ASP.NET項目中有一個小部件。它必須是300像素寬，不能更寬。不幸的是，他們想要的對於這樣一個小部件已經證明是相當複雜的。以下是我現在所擁有的：如何在HTML表格上覆制「凍結窗格」功能？

http://www.codetunnel.com/content/images/widget/currentWidget.jpg

正如你可以看到，這是一個jQuery UI的手風琴控制。隨着每個手風琴窗格展開，ajax調用異步加載其內容。現在它吐出一張包含所需數據的HTML表格。該表位於DIV中，樣式爲overflow: auto;，以便我們可以在底部和右側獲得滾動條。

我的問題是，我想要一些漂亮的自定義功能（如在Excel中的凍結窗格功能）。當向左和向右滾動時，我希望包括標題在內的所有行可以向左和向右滾動，除了最左列「產品名稱」的。就像這樣：

http://www.codetunnel.com/content/images/widget/scrollRight.jpg

當上下滾動我想所有列，包括左邊的列，以向上和向下滾動除了標題行。就像這樣：

http://www.codetunnel.com/content/images/widget/scrollDown.jpg

什麼是實現這一功能的最好方法是什麼？還是有辦法？

來源

2011-08-16 Chev

+1對於您正在嘗試完成的圖片有很大的問題。而且，因爲這看起來像一個棘手的問題..;） – NotMe

@克里斯，謝謝！ – Chev

+1以及我未來可以看到自己使用的東西的最愛。 – zeroef

我構建了一些有點類似的東西，但不太複雜：我希望表格（標題）的第一行在數據行垂直滾動時被凍結。我將它實現爲2個不同的表格，每個表格都有固定寬度的單元格，每個表格都有自己的DIV。「header」div只是靜態的，「body」div使用overflow：auto來滾動。

你的問題更復雜，因爲你想在兩個軸上「凍結窗格」，並支持在兩個軸上滾動（我有更多的房地產可以使用，並且不必考慮水平滾動完全）。不過，我想知道你能否從這個位置開始，並從那裏工作...

定義4個格：

淨重：這個完全不滾動，直到永遠。這是您的示例中的「產品名稱」單元格
NE：該單元格僅在水平方向滾動。這是你的例子中的頂部/標題行
SW：這個只是垂直滾動。這是您示例中的左側列
SE：這個滾動兩個方向。這是你的例子中的主要數據網格

有了4個DIV，你會處理4個不同的表格，所以我們需要保持它們的單元格寬度和單元高度同步。理想情況下，我們可以在渲染時做到這一點，如果我們可以使它們成爲固定值。否則，我們可能可以編寫一些客戶端jquery/JS來在頁面首次加載（或調整大小）時迭代SE表中的單元格，並強制其他表格的大小與其匹配。

對於4個DIV，我們還需要同步滾動：當SE水平滾動時，NE必須滾動到相同的位置。當SE垂直滾動時，SW必須滾動到相同的位置。我懷疑必須有一些我們可以掛鉤的客戶端滾動事件來檢測SE滾動的時間。在這些事件中，我們應該能夠強制NE和/或SW以相同的方式滾動。

對不起，這是一個模糊/抽象的迴應。執行這樣的事情的本質需要更多的時間，比我能夠輕鬆地從我的主要工作中竊取更多的時間。但是，這是在我的腦子裏發出的快感，所以我想我會與你分享。我希望它能讓你至少更接近解決方案。乾杯!

來源

2011-08-16 17:35:40 mikemanne

不要道歉，我很欣賞反饋。這實際上就是我試圖去的路線，但是由於小屏幕房地產，我遇到了一些障礙。例如，直到水平欄一直向右滾動，垂直條才顯示出來;但那是我自己的代碼的問題。我也討厭不得不保持單元格寬度和高度靜態，以便它們匹配。我想我只是希望有一個比四個DIV和javascript滾動同步更簡單的解決方案。謝謝，+1！ – Chev

是的，無論你用哪種方式切片，都是一個挑戰。你可能想看看EXT.JS面板：sencha.com –

感謝您的+！我已經收藏了這個問題來關注它。如果你願意，我很想聽聽更多關於如何最終實現它的信息，以及實現的好壞。 :)也許在這裏更新一些評論，或者如果你保留一個博客，這將是一個很好的入門。乾杯! – mikemanne

這是什麼tbody可以解決固定大小的表內？看來你可以把overflow:auto放在tbody上。

來源

2011-08-16 17:57:29

不，這隻會使主要部分滾動，而不是兩側的部分，當他們應該。而你仍然有固定寬度和高度的問題。 – Chev

如何在HTML表格上覆制「凍結窗格」功能？

回答

相關問題