Adding a fixed header to a dynamic table

Question

I find myself in need of assistance again, stack overflow.

Essentially I have a table which uses AngularJS to populate the various rows with data. The length of the said data is something that changes and as such the size of the table headers are constantly changing to fit.

My issue is having a fixed header which stays constant in regards to the size of the table body. It's a table similar to the one shown in the plnkr.

Any ideas would be appreciated including Javascript.

    <thead>
        <tr>
            <th class="statwidth"><span ng-click="setOrderProperty('a')"></span></th>
            <th>R<span ng-click="setOrderProperty('b')"></span></th>
            <th>S<span ng-click="setOrderProperty('c')" class="glyphicon glyphicon-chevron-down pull-right"></span></th>
            <th>D<span ng-click="setOrderProperty('d')" class="glyphicon glyphicon-chevron-down pull-right"></span></th>
            <th>O<span ng-click="setOrderProperty('e')" class="glyphicon glyphicon-chevron-down pull-right">
            </span></th>
            <th>St<span ng-click="setOrderProperty('f')"></span></th>
        </tr>
        </thead>

http://plnkr.co/edit/T0qaEBLp9qcPZuUQR6Jl?p=preview

is the count of columns in tbody always greater than in thead? — pyanzin, Sep 30 '15 at 15:10
It this what you are looking for http://stackoverflow.com/questions/4457506/set-the-table-column-width-constant-regardless-of-the-amount-of-text-in-its-cell — Asons, Sep 30 '15 at 15:15
@kedkod It's always the same, no extra columns there's six for both.. — TheLimeTrees, Oct 01 '15 at 08:20
@LGSon You misunderstood me, it's about fixing the `tr` so you can scroll up and down without losing the context of the `tr`, i.e. you can always see the `th` no matter how far down the `table` goes If you simply fix the `th`, the size of each cell size no longer represents the length of the `tbody`. — TheLimeTrees, Oct 01 '15 at 08:23
@LGSon That one doesn't work for me unfortunately as I can't restrict the column size for this. — TheLimeTrees, Oct 01 '15 at 09:04

score 0 · Answer 1 · answered Sep 30 '15 at 15:43

After the table tag You can use the col element.

For example, for three columns:

<table>
  <colgroup>
    <col style="width:40%">
    <col style="width:30%">
    <col style="width:30%">
  </colgroup>  
  <tbody>
    ...
  </tbody>
</table>

I arrange a fiddle: https://jsfiddle.net/pgh6o54z/

Adding a fixed header to a dynamic table

1 Answers1