2015-08-21 68 views
1

我有一個相當複雜的表,其中包含幾個動態構建的colpsan和rowspan,我希望鎖定標題(如果可能的話,也左)和滾動表格內容(垂直和水平)。使用複雜的colspan和rowspan滾動表內容,鎖定標題和左列

該表格有很多行和列(3到4百行,列取決於用戶選擇查看的時間範圍)。 此表代表了沿時間線產品的降價概況。每種產品可能有一種或多種折扣類型。

我的表看起來像這樣(遺憾的模糊,但在它的信息是一種保密):

enter image description here

綜上所述,前三行是頭和前三的cols是產品信息(這些是我想鎖的!)。

將每個產品折扣放入起點上的TD此折扣以COLSPAN開始,允許折扣到折角結束。

因此,正如你可以想象的那樣,當顯示的產品數量增加時,用戶不再知道每一列對應的日期,並且如果他選擇的日期跨度更遠(並且想法是去日期跨度超過1年),他們不知道他們正在查看哪個產品(我通過爲產品信息添加每個<tr>的標題來扭轉這種情況,所以任何解鎖頭的解決方案都足夠了!)

我已經嘗試了幾種解決方案來鎖頭,但都沒有工作,因爲表體上td的集羣,我的tbody和head不對齊。

任何人都知道我該怎麼做這樣的事情?我們使用的mootools這裏...

+0

菲利佩可以重現該表中的jsfiddle修復它,即使是在一個簡單的版本?你可以免費更換CSS,或者你有CSS庫嗎?有一個相關的線程(http://stackoverflow.com/a/17380697/2256325),但如果你在這裏添加一個jsFiddle,我們可以檢查出來。 – Sergio

+0

感謝您的關注! 這裏鏈接到一個jsFiddle:https://jsfiddle.net/fcastanheira/5b5oo9jh/1/ –

+0

Filipe,這是否必須是一個tr/td表?或者它可以是一個表,但與div元素? – Sergio

回答