0

I would like to fix my tables head (thead) as soon as someone scrolls down or fix the first column (.first-column) as soon as someone scrolls left or right. Below you can see an example of my table. It can contain about 100 columns and 1000 cells, that is why I need this.
I guess this is not possible with just plain css, but maybe I am wrong. Way or another, I would like to ask for help to get this right. I am using jQuery 2.x.

<table>
  <thead>
    <tr>
      <td class="first-column"></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td> class="first-column"> </td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td> class="first-column"> </td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td> class="first-column"> </td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td> class="first-column"> </td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
  ...
    </tbody>

</table>

asdfasdf

Ali Zia
  • 3,825
  • 5
  • 29
  • 77
Sylnois
  • 1,589
  • 6
  • 23
  • 47
  • Possible duplicate of [CSS-Only Scrollable Table with fixed headers](http://stackoverflow.com/questions/11891065/css-only-scrollable-table-with-fixed-headers) – Jitendra Tiwari May 03 '16 at 07:11
  • Same question [Here](http://stackoverflow.com/questions/11891065/css-only-scrollable-table-with-fixed-headers) – Jitendra Tiwari May 03 '16 at 07:12

1 Answers1

0

You can do this by setting table headers offset to fix position on scroll event

$(window).bind("scroll", function() {
    var offset = $(this).scrollTop();

    if (offset >= tableOffset && $fixedHeader.is(":hidden")) {
        $fixedHeader.show();
    }
    else if (offset < tableOffset) {
        $fixedHeader.hide();
    }
});

Refer similar question asked on Stack.

Community
  • 1
  • 1
khushboo29
  • 906
  • 6
  • 16
  • Tried this already before. I had some problem with the `width` of the table. And it still doesn't solve my second request, scrolling left or right. – Sylnois May 03 '16 at 07:20