0

I have the following table with fixed first column.

JSFiddle:

https://jsfiddle.net/f7v2xaph/

<iframe width="100%" height="300" src="//jsfiddle.net/f7v2xaph/embedded/" allowfullscreen="allowfullscreen" frameborder="0"></iframe>

I would like to ask, how to update the code to get fixed header too?

I tried this solution

Scrollable table with fixed header in bootstrap

But without the luck to get working with fixed first column.

Many thanks for any advice.

Community
  • 1
  • 1
redrom
  • 11,502
  • 31
  • 157
  • 264
  • Did you try these **[solutions given here](http://stackoverflow.com/questions/14977864/fixed-header-table-with-horizontal-scrollbar-and-vertical-scrollbar-on)** or in the way you have now for first `th`, **[this fiddle](https://jsfiddle.net/Guruprasad_Rao/f7v2xaph/1/)** gives it for all `th` – Guruprasad J Rao Oct 21 '15 at 13:32
  • Thanks but there is the issue with moving of the header in Your fiddle. – redrom Oct 21 '15 at 14:13
  • What issue @redrom?? – Guruprasad J Rao Oct 21 '15 at 14:14
  • In Fiddle You linked. If You are moving horizontally, heading is not updated correctly. – redrom Oct 21 '15 at 14:24
  • that's because the way your first fiddle as you said was doing first th fixed and it used to it by cloning the element.. – Guruprasad J Rao Oct 21 '15 at 14:32

1 Answers1

0

Avoid using Javascript when you can do it in CSS:

.table-responsive thead {
   position: fixed;
}

Also, you will need to do a little trick if you don't want your head to overhide your tbody:

.table-responsive {
    margin-top: 40px; // height of your thead tr
}

.table-responsive thead {
    position: fixed;
    top: 0;
}

The second issue of fixing your thead is that your thead's cells width won't match your tbody's cells width... ans you will have to fix it with width property, cell per cell.

Hugo
  • 71
  • 2
  • Thanks but now is header fixed with during the vertical scrolling (this is OK), but is not moving during the horizontal scrolling. Could You please suggest, how to solve it or update my Fiddle please? – redrom Oct 21 '15 at 13:54
  • Could You please to add some working example of Your code? – redrom Oct 21 '15 at 15:20