I am facing a challenge with a dynamically generated table that has complex structure including colspans and rowspans. My goal is to fix the headers and, if possible, even lock the first few rows on the left side while allowing the content of the table to scroll both vertically and horizontally.
This particular table contains numerous lines and columns, ranging from 300 to 400 lines depending on the timeframe selected by the user. It serves as an overview of discounts on products across a timeline. Each product can have multiple types of discounts.
Unfortunately, I cannot provide a clear image of the table due to confidentiality reasons:
https://i.stack.imgur.com/Xxljp.png
To summarize, the first three rows serve as headers, and the first three columns contain product information (which I want to keep locked).
Each discount for a product is allocated within a TD element, starting from a specific column and spanning across multiple columns until the discount ends.
As the number of products displayed increases, users face difficulty in determining which date corresponds to each column. Moreover, it becomes even more challenging when they choose a longer date range (possibly over a year) and struggle to identify the specific product being observed. To somewhat mitigate this problem, I have added a title to each <tr> element, providing product information. Nevertheless, I am searching for a solution to lock the headers, which would greatly enhance user experience.
I have attempted various solutions, but none of them worked effectively due to the misalignment caused by colspans within the tbody and theader.
If anyone knows how I can achieve this desired functionality, specifically using mootools, I would greatly appreciate your guidance.