Fixed Header Table With Horizontal Scrollbar and Vertical Scrollbar On

.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>

Fixed table header scroll both horizontal and vertical CSS ONLY

This is another one of those interesting challenges (like vertical centering) brought to us by the inaction of the W3C. Also like vertical centering, you can't put a fixed header on a table with a horizontal scrollbar using position: fixed; on the thead element. But you do have a couple of options.

Option 1 - Horizontal Scrolling (http://codepen.io/staypuftman/pen/JXbpvZ)

The key here is to reestablish your table layout as table-layout: fixed; CSS-tricks has a good piece on this approach and then put a min-width value on your container when you want the scrollbars to appear. This makes the table scrollable left to right and maintains the integrity of the column headers on smaller devices. But the header is not fixed.

Option 2 - Fixed Header (https://jsfiddle.net/dPixie/byB9d/3/light/)

Your code looked like a rip-off of this guy's work, so I thought I'd repost here to give him some credit. This approach creates a series of <div> elements that mirror the contents of the <th> elements and uses some VERY creative positioning techniques to get it all to work.

There is a much better run-down on Salzar design that shows some examples and explains in detail all the complicated maneuvers to get this right.

Horizontal scrollbar on table with sticky header

i have fixed this issue by providing the container a fixed max height, that way it will have the sticky header and scrolling as well.

.table-flow {
  max-height: 555px;
  overflow-x: scroll;
  max-width: auto;
  position: relative;
}

Table header fixed, scrollable body horizontal and vertical, variable cell width

Edited to handle the possibility of longer columns, as I didn't notice that prerequisite

Interesting problem!

You can achieve what you want with less CSS and no jQuery, if you are happy to set a fixed width for the columns:

If you ensure that your CSS is set so that the default column width is as long as is necessary for any table headers, then this solution should work:

CSS

table#vehicleTable {
  position: relative;
  display: block;
  margin-left: 0px;
  width: 400px;
  height: 400px;
  overflow-x: scroll;
  overflow-y: hidden;
}
table#vehicleTable thead {
  background-color: blue;
  color: white;
}
table#vehicleTable tbody {
  position: relative;
  display: inline-block;
  height: 345px; /*allowing for scrollbar and th height */
  overflow-y: scroll;
}
table#vehicleTable td, table#vehicleTable th  {
  min-width: 100px; /*suitable width for all column headers in the example*/
}

/*Added this just to handle the 2nd column, which needs to be smaller, as per comments */

table#vehicleTable td:nth-of-type(2), table#vehicleTable th:nth-of-type(2) {
  min-width: 30px;
  text-align: center;
}

jQuery

$(window).on('load', function () {
    $i = 0;
    $("#vehicleTable tbody tr:first-of-type td").each(function()
  {
    $i++;
    width = $(this).outerWidth();
    $("#vehicleTable thead th:nth-of-type(" +$i+")").css({"min-width": width+"px"});
  });
});

This will loop through the first row of tbody, and get the respective widths for each column. If you don't set a min-width on them first, then any columns with data that is shorter than the column header will result in that column shrinking, while the header itself will still expand to fit its own content.

Also updated JSFiddle

Related Topics