Keep headers sticking to the correct place when scrolling horizontally

[simonflk]

I needed this modification for a project I'm working on.

I have added a demo so you can see the fix (table on the left) and the problem (table on the right)
I'm hoping this could be useful to other people. I'm not sure horizontalArea is the best name for the option, so I'm happy if you can think of something better.

Please let me know if you have any questions.
Thanks

[JustIngvarr]

Hi @simonflk @jmosbech. Could you fix the correct handling of the sticky header with 2 or more rows?

<tr>
    <th rowspan="2">Rank</th>
    <th rowspan="1">Name</th>
    <th rowspan="2">Nat.</th>
    <th rowspan="2">Team</th>
    <th class="age" rowspan="2">Age</th>
    <th class="result" rowspan="2">Result</th>
</tr>
<tr>
    <th rowspan="1">Name 2</th>
</tr>