3

Questions about fixed headers and columns are abundant, and so are css/javascript/jQuery solutions.
Unfortunately, none of the solutions work when I have a table with different colSpans and rowSpans;

so, let's take this table for example: 

<table >
    <thead>
        <tr >
            <td rowspan="2" class="row-header">[Product.Color]</td><td rowspan="2" class="row-header">[Product.SizeUnitMeasureCode]</td><td >False</td><td >True</td>
        </tr><tr>
            <td >True</td><td >True</td>
        </tr>
    </thead><tbody>
        <tr>
            <td rowspan="2" class="row-header">Blue</td><td class="row-header"></td><td >225.49</td><td ></td>
        </tr><tr>
            <td class="row-header">CM </td><td ></td><td >23790.17</td>
        </tr><tr>
            <td class="row-header">Grey</td><td class="row-header"></td><td >125</td><td ></td>
        </tr><tr>
            <td class="row-header">Multi</td><td class="row-header"></td><td >478.92</td><td ></td>
        </tr><tr>
            <td rowspan="2" class="row-header">Yellow</td><td class="row-header"></td><td >215.96</td><td ></td>
        </tr><tr>
            <td class="row-header">CM </td><td ></td><td >34311.33</td>
        </tr>
    </tbody>
</table>

(fiddle) (which generates the following: enter image description here )

(yes, you probably noticed that I'm talking about a pivot table here :)).

I would like for the column header section (gray background) to remain in place when the table content is scrolled vertically, and for the row header section (red text) to remain in place when scrolling vertically.

Any thoughts? (any css / jQuery / javascript solution will be accepted :))

Community
  • 1
  • 1
J. Ed
  • 6,692
  • 4
  • 39
  • 55
  • Google 'jQuery scrollable tables' as there are plenty to choose from. –  Dec 12 '13 at 13:31
  • @jeff obviously I've done this. as you can read in the first sentence of this question, I haven't found any that meet all my requirements (some plugins are linked-to, as well) – J. Ed Dec 12 '13 at 14:15
  • @sJhonny The `colSpan` and `rowSpan` makes it harder to align and position the fixed section of the table (header/column) as there are lot of combinations which could break the calculation when positioning the fixed sections. My first version of the code had ability to align with `colSpan` but there were some issues when trying it out different scenario. http://jsfiddle.net/rCuPf/7/ – Selvakumar Arumugam Dec 12 '13 at 16:52

1 Answers1

0

I tried with position: fixed for your thead and it works but:

  • I needed 2 tables because your tbody structure isn't the same with thead position:fixed only. So i made first table only thead with fixed and in the secound table i had the same header without fixed to get the same tbody structure.

The problem i can't solve for you is, that the fixed thead isn't at the same width like the tbody.

<thead style="position:fixed;" here is fiddle

DJmRek
  • 378
  • 6
  • 13
  • i thought about something like [secoundthead] opacity:0; and a js that set width of the first table to the value of 2. table – DJmRek Dec 12 '13 at 13:37