Fixed Table Header Scroll Both Horizontal And Vertical Css Only

Firstly, is it possible to achieve this using only CSS? I have built a table that can scroll both horizontally and vertically however, I want to have the header encapsulated withi

Solution 1:

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.