Table with horizontal and vertical scroll with fixed header

Question

I do have a table with horizontal and vertical scroll with a fixed header with elements taking as much as space it needs. I am working with React. It would be awesome if there is a react based solution too if CSS alone cannot solve it.

Note:

I did try other solutions here but it is not what I'm looking for
It would be better if td can have min-width set on them too
The header shows menu when it is clicked for sorting and filtering

I don't know about React, but there is a nice and complete jQuery plugin to do so: datatables.net/examples/basic_init/scroll_xy.html — feeela
– feeela, Commented May 8, 2019 at 11:52
React based solution would be nice since I cant include jQuery — user93
– user93, Commented May 8, 2019 at 11:53
I did find a similar plugin in react react-sticky-table but the problem was the children could not connect to redux-store github.com/henrybuilt/react-sticky-table/issues/37 — user93
– user93, Commented May 8, 2019 at 11:55
any codesandbox of what you have tried ? it will be helpful to the community to assist you :) — semuzaboi
– semuzaboi, Commented May 9, 2019 at 7:03

gitfudge · Accepted Answer · 2019-05-09 06:55:38Z

18

There's a simple CSS solution to fix rows(headers) and columns in a table.

th {
  position: sticky:
  top: 0;
}

The above snippet will fix the header to the top. Then it's just a matter of adding a simple overflow to the parent container of the table. You can find a simple example below -

.table-container {
  overflow: auto;
  max-height: 160px;
  border: 1px solid red;
}

th {
  position: sticky;
  top: 0;
  background: white;
}

<div class="table-container">
  <table>
    <thead>
      <tr>
        <th>Head 1</th>
        <th>Head 2</th>
        <th>Head 3</th>
        <th>Head 4</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
      </tr>
      <tr>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
      </tr>
      <tr>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
      </tr>
      <tr>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
      </tr>
      <tr>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
      </tr>
      <tr>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
      </tr>
      <tr>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
      </tr>
      <tr>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
      </tr>
      <tr>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
      </tr>
      <tr>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
      </tr>
      <tr>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
      </tr>
      <tr>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
      </tr>
      <tr>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
      </tr>
    </tbody>
  </table>
</div>

answered May 9, 2019 at 6:55

gitfudge

5304 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

user93 Over a year ago

It does work. It was silly of me not think this. In addition to the above code I just needed to add ``` width: 100%;```

Tmh Over a year ago

this looks better than the rest I tried but this is not retaining the borders :(

Tmh Over a year ago

here it is @dbigpot, jsfiddle.net/0dzkvutp/2

Priyen Mehta Over a year ago

Why it is not returning border @dpigpot

mschoenebeck Over a year ago

The solution works but why is the table header changing it's height when scrolling? How to prevent that?

Collectives™ on Stack Overflow

Table with horizontal and vertical scroll with fixed header

Note:

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

Note:

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related