1

I have a rather complex table with several colpsan and rowspan that is built dynamically, and I wish to lock headers (and if possible the first rows on the left also) and scroll table content (both vertically and horizontally).

This table has lots of lines and columns (3 to 4 hundred lines, and columns depend on the time frame my user chooses to see). This table represents an overview of the downprices on products along a timeline. Each product may have one or more discount types.

My table looks like this (sorry for the blurs, but the info in it is kind of confidential):

enter image description here

In summary, the first three rows are headers and the first three cols are product information (those are the ones I would like to lock!).

Each product discount is put into a TD starting on the col this discount starts with a COLSPAN that allows it to go to the col the discount ends.

So, as you can imagine, when the number of product shown grows, users don't know anymore to which date each column corresponds, and if he chooses a date span that goes much further (and the idea is to go on a date span over 1 year) they won't know which product they are looking at (I've turned around this by adding a title to each <tr> with the product info, so any solution to lock headers will be great enough!)

I've tried several solutions to lock header, but none of them worked since due to the colspans of the td on table body, my tbody and theader don't align.

Anyone knows how I can do such a thing? We use mootools here...

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
Filipe Castanheira
  • 634
  • 9
  • 27
  • Filipe can you reproduce that table in a jsFiddle, even in a simpler version? Can you change CSS free or do you have a CSS library behind? There is a thread relevant for this (http://stackoverflow.com/a/17380697/2256325) but if you add a jsFiddle here we can check it out. – Sergio Aug 21 '15 at 19:16
  • Thanks for the interest! Here the link to a jsFiddle: https://jsfiddle.net/fcastanheira/5b5oo9jh/1/ – Filipe Castanheira Aug 22 '15 at 14:44
  • Filipe, does that have to be a table with tr/td? or can it be a table but with div elements? – Sergio Aug 22 '15 at 18:15
  • Since it's built dinamically, it is easier to build it with tr/td (or at least, I guess). Also, I have to keep in mind that the solution for this table (if any) will have to be adapted to at least three more tables / listings where I have the same problem. Ah, and I forgot to answer before: I can freely change my CSS. And I've already tried what is said on that thread (or a similar solution) with no success: header and body columns don't match. – Filipe Castanheira Aug 22 '15 at 20:56
  • dude. use slickgrid. also slickgrid frozen. don't reinvent the wheel, `table` virtualisation and fixed headers are not trivia to do, table elements are less than ideal also and most data grid implementations actualy use `div` and css to position. it's much easier to manage... – Dimitar Christoff Aug 27 '15 at 21:17

1 Answers1

0

A collegue managed to fix it using http://blog.jaimon.co.uk/datascroller/fxHeader_0.6.html

Filipe Castanheira
  • 634
  • 9
  • 27