頂部行和左側列凍結的可滾動HTML表格

有沒有人能夠在HTML中實現可滾動表格，其中TOP行和LEFT列被凍結，但表格的其餘部分是可滾動的？一個完美的例子是： Google Squared 頂部行和左側列凍結的可滾動HTML表格

我試圖逆向工程的谷歌平方表的代碼，但我一直沒有成功到目前爲止。

注意：我需要能夠同時凍結TOP ROW和LIVT COLUMN。

來源

2009-07-08 Jon

鏈接已損壞。你能提供一個新的，因爲我真的很好奇這個表的實用價值。 – 2014-07-04 11:06:15

有在http://ajaxian.com/archives/freeze-pane-functionality工作的例子，應該是很容易複製。請務必記下這些評論 - 許多用戶爲改進腳本提供了有用的建議。

根據@Nirk的要求，與活動演示的直接鏈接是http://www.disconova.com/open_source/files/freezepanes.htm。

來源

2009-07-08 23:06:07 anschauung

有沒有人找到更好的方法來做到這一點？我正在處理一些巨大的數據集，因此這些表格包含大量的數據，將這些數據克隆到4次只是簡單地不起作用。 jQuery是否有任何方法來達到同樣的目的？ – 2009-10-16 20:48:22

-1

如果你使用jQuery，有很多用於固定表頭的表格插件。

來源

2009-07-08 22:25:09 usoban

去與像這個 -

table 
    row 
    column (blank) 
    column 
     table (1 row high, column headers) 
    row 
    column 
     table (1 column wide, row headers) 
    column 
     div (fixed height & width, overflow auto) 
     table (actual data)

設定一個固定的表格佈局的基本結構，並明確指定像素列寬。你應該能夠達到同樣的效果。

來源

2009-07-08 22:39:48

如果您想讓單元格內容確定單元格的大小（即使用默認的表格佈局），該怎麼辦？ – allyourcode 2010-03-13 15:40:49

-1

你需要Scrollable（jQuery插件）

Demo is here

來源

2009-07-08 22:57:01 Thinker

演示在我的瀏覽器中被刷新（chrome） – tfwright 2010-12-14 08:58:46

我有一個使用的版本（甘特圖樣式顯示）。

它使用3個表格：左列（行）爲1，上列（列）爲1，然後是數據。

您需要努力使單元匹配尺寸與匹配尺寸（ table layout-fixed可以幫助實現此目的）。

然後將表格放在一些div中;左和頂部div（如上建議）高度&寬度和overflow-auto在他們的CSS。

然後，您掛鉤一些JavaScript與內一個同步的左/頂部的div的滾動...

我記得有的「詛咒和嘗試，再次」公平一點，但可以用最少的js來完成。

hth

來源

2009-08-22 09:07:48 realcals

頂部行和左側列凍結的可滾動HTML表格

回答

相關問題