Fixed header table with horizontal scrollbar and vertical scrollbar on

This is not an easy one. I've come up with a Script solution. (I don't think this can be done using pure CSS)

the HTML stays the same as you posted, the CSS changes a little bit, JQuery code added.

Working Fiddle Tested on: IE10, IE9, IE8, FF, Chrome

BTW: if you have unique elements, why don't you use id's instead of classes? I think it gives a better selector performance.

Explanation of how it works: inner-container will span the entire space of the outer-container (so basically, he's not needed) but I left him there, so you wont need to change you DOM.

the table-header is relatively positioned, without a scroll (overflow: hidden), we will handle his scroll later.

the table-body have to span the rest of the inner-container height, so I used a script to determine what height to fix him. (it changes dynamically when you re-size the window) without a fixed height, the scroll wont appear, because the div will just grow large instead.. notice that this part can be done without script, if you fix the header height and use CSS3 (as shown in the end of the answer)

now it's just a matter of moving the header along with the body each time we scroll. this is done by a function assigned to the scroll event.

CSS (some of it was copied from your style)

* { padding: 0; margin: 0; } body { height: 100%; width: 100%; } table { border-collapse: collapse; /* make simple 1px lines borders if border defined */ } .outer-container { background-color: #ccc; position: absolute; top:0; left: 0; right: 300px; bottom: 40px; } .inner-container { height: 100%; overflow: hidden; } .table-header { position: relative; } .table-body { overflow: auto; } .header-cell { background-color: yellow; text-align: left; height: 40px; } .body-cell { background-color: blue; text-align: left; } .col1, .col3, .col4, .col5 { width:120px; min-width: 120px; } .col2 { min-width: 300px; } 

JQuery

$(document).ready(function () { setTableBody(); $(window).resize(setTableBody); $(".table-body").scroll(function () { $(".table-header").offset({ left: -1*this.scrollLeft }); }); }); function setTableBody() { $(".table-body").height($(".inner-container").height() - $(".table-header").height()); } 

If you don't care about fixing the header height (I saw that you fixed the cell's height in your CSS), some of the Script can be skiped if you use CSS3 :Shorter Fiddle (this will not work on IE8)

Here's a solution which again is not a CSS only solution. It is similar to avrahamcool's solution in that it uses a few lines of jQuery, but instead of changing heights and moving the header along, all it does is changing the width of tbody based on how far its parent table is scrolled along to the right.

An added bonus with this solution is that it works with a semantically valid HTML table.

It works great on all recent browser versions (IE10, Chrome, FF) and that's it, the scrolling functionality breaks on older versions.

But then the fact that you are using a semantically valid HTML table will save the day and ensure the table is still displayed properly, it's only the scrolling functionality that won't work on older browsers.

Here's a jsFiddle for demonstration purposes.

CSS

table { width: 300px; overflow-x: scroll; display: block; } thead, tbody { display: block; } tbody { overflow-y: scroll; overflow-x: hidden; height: 140px; } td, th { min-width: 100px; } 

JS

$("table").on("scroll", function () { $("table > *").width($("table").width() + $("table").scrollLeft()); }); 

I needed a version which degrades nicely in IE9 (no scrolling, just a normal table). Posting the fiddle here as it is an improved version. All you need to do is set a height on the tr.

Additional CSS to make this solution degrade nicely in IE9

tr { height: 25px; /* This could be any value, it just needs to be set. */ } 

Here's a jsFiddle demonstrating the nicely degrading in IE9 version of this solution.

Edit: Updated fiddle links to link to a version of the fiddle which contains fixes for issues mentioned in the comments. Just adding a snippet with the latest and greatest version while I'm at it:

$('table').on('scroll', function() { $("table > *").width($("table").width() + $("table").scrollLeft()); });

html { font-family: verdana; font-size: 10pt; line-height: 25px; } table { border-collapse: collapse; width: 300px; overflow-x: scroll; display: block; } thead { background-color: #EFEFEF; } thead, tbody { display: block; } tbody { overflow-y: scroll; overflow-x: hidden; height: 140px; } td, th { min-width: 100px; height: 25px; border: dashed 1px lightblue; overflow: hidden; text-overflow: ellipsis; max-width: 100px; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table> <thead> <tr> <th>Column 1</th> <th>Column 2</th> <th>Column 3</th> <th>Column 4</th> <th>Column 5</th> </tr> </thead> <tbody> <tr> <td>AAAAAAAAAAAAAAAAAAAAAAAAAA</td> <td>Row 1</td> <td>Row 1</td> <td>Row 1</td> <td>Row 1</td> </tr> <tr> <td>Row 2</td> <td>Row 2</td> <td>Row 2</td> <td>Row 2</td> <td>Row 2</td> </tr> <tr> <td>Row 3</td> <td>Row 3</td> <td>Row 3</td> <td>Row 3</td> <td>Row 3</td> </tr> <tr> <td>Row 4</td> <td>Row 4</td> <td>Row 4</td> <td>Row 4</td> <td>Row 4</td> </tr> <tr> <td>Row 5</td> <td>Row 5</td> <td>Row 5</td> <td>Row 5</td> <td>Row 5</td> </tr> <tr> <td>Row 6</td> <td>Row 6</td> <td>Row 6</td> <td>Row 6</td> <td>Row 6</td> </tr> <tr> <td>Row 7</td> <td>Row 7</td> <td>Row 7</td> <td>Row 7</td> <td>Row 7</td> </tr> <tr> <td>Row 8</td> <td>Row 8</td> <td>Row 8</td> <td>Row 8</td> <td>Row 8</td> </tr> <tr> <td>Row 9</td> <td>Row 9</td> <td>Row 9</td> <td>Row 9</td> <td>Row 9</td> </tr> <tr> <td>Row 10</td> <td>Row 10</td> <td>Row 10</td> <td>Row 10</td> <td>Row 10</td> </tr> </tbody> </table>

Here is a HTML / CSS only solution (with a little javascript).

Apology to answer the question after this long, but the solution given did not suit me and I found a better one. Here is the easiest way to do it with HTML (no jquery):

Before that, the solution fiddle to the question. https://jsfiddle.net/3vzrunkt/

<div> <div style="overflow:hidden;;margin-right:16px" id="headerdiv"> <table id="headertable" style="min-width:900px" border=1> <thead> <tr> <th style="width:120px;min-width:120px;">One</th> <th style="width:420px;min-width:420px;">Two</th> <th style="width:120px;min-width:120px;">Three</th> <th style="width:120px;min-width:120px;">Four</th> <th style="width:120px;min-width:120px;">Five</th> </tr> </thead> </table> </div> <div style="overflow-y:scroll;max-height:200px;" onscroll="document.getElementById('headerdiv').scrollLeft = this.scrollLeft;"> <table id="bodytable" border=1 style="min-width:900px; border:1px solid"> <tbody> <tr> <td style="width:120px;min-width:120px;">body row1</td> <td style="width:420px;min-width:420px;">body row2</td> <td style="width:120px;min-width:120px;">body row2</td> <td style="width:120px;min-width:120px;">body row2</td> <td style="width:120px;min-width:120px;">body row2 en nog meer</td> </tr> : : : : </tbody> </table> </div> </div> 

And to explain the solution:

1. you need and enclosing div no overflow/scroll required

2. a header div containing the header table with overflow:hidden to ensure that the scrollbar is not displayed. Add margin-right:16px to ensure that the scrollbar is left outside it while synching.

3. another div for containing the table records and overflow-y:scroll. Note the padding is required to get the scrollbar move right of the header.

4. And the most important thing the magical js to sync the header and table data:

    onscroll="document.getElementById('headerdiv').scrollLeft = this.scrollLeft;" 

This has been driving me crazy for literally weeks. I found a solution that will work for me that includes:

1. Non-fixed column widths - they shrink and grow on window resizing.
2. Table has a horizontal scroll-bar when needed, but not when it isn't.
3. Number of columns is irrelevant - it will size to however many columns you need it to.
4. Not all columns need to be the same width.
5. Header goes all the way to the end of the right scrollbar.
6. No javascript!

...but there are a couple of caveats:

1. The vertical scrollbar is not visible until you scroll all the way to the right. Given that most people have scroll wheels, this was an acceptable sacrifice.

2. The width of the scrollbar must be known. On my website I set the scrollbar widths (I'm not overly concerned with older, incompatible browsers), so I can then calculate div and table widths that adjust based on the scrollbar.

Instead of posting my code here, I'll post a link to the jsFiddle.

Fixed header table + scroll left/right.

working example in jsFiddle

This can be achieved using div. It can be done with table too. But i always prefer div.

<body id="doc-body" style="width: 100%; height: 100%; overflow: hidden; position: fixed" onload="InitApp()"> <div> <!--If you don't need header background color you don't need this div.--> <div id="div-header-hack" style="height: 20px; position: absolute; background-color: gray"></div> <div id="div-header" style="position: absolute; top: 0px; overflow: hidden; height: 20px; background-color: gray"> </div> <div id="div-item" style="position: absolute; top: 20px; overflow: auto" onscroll="ScrollHeader()"> </div> </div> </body> 

Javascript:
please refer jsFiddle for this part. Else this answer becomes very lengthy.

The solution is to use JS to horizontally scroll the top div so that it matches the bottom div.

You must be very careful to make sure the top and bottom are exactly the same sizes, for example you might need to make the TD and TH use fixed widths.

Here is a fiddle https://jsfiddle.net/jdhenckel/yzjhk08h/5/

The important parts: CSS use

.head { overflow-x: hidden; overflow-y: scroll; width: 500px; } .lower { overflow-x: auto; overflow-y: scroll; width: 500px; height: 400px; } 

Notice overflow-y must be the same on both head and lower.

And the Javascript...

var head = document.querySelector('.head'); var lower = document.querySelector('.lower'); lower.addEventListener('scroll', function (e) { console.log(lower.scrollLeft); head.scrollLeft = lower.scrollLeft; }); 

you can use following CSS code..

body { margin:0; padding:0; height: 100%; width: 100%; } table { border-collapse: collapse; /* make simple 1px lines borders if border defined */ } tr { width: 100%; } .outer-container { background-color: #ccc; top:0; left: 0; right: 300px; bottom:40px; overflow:hidden; } .inner-container { width: 100%; height: 100%; position: relative; } .table-header { float:left; width: 100%; } .table-body { float:left; height: 100%; width: inherit; } .header-cell { background-color: yellow; text-align: left; height: 40px; } .body-cell { background-color: blue; text-align: left; } .col1, .col3, .col4, .col5 { width:120px; min-width: 120px; } .col2 { min-width: 300px; } 

There's a jquery plugin for this: jquery.floatThead

As we all know maintaining your own solution is not the best. I recommend trying vh-sticky-table-header. This module enables sticky header and it works in horizontal scrolling of the table as well.

Also it is framework agnostic and has no dependencies, better suited for modern SPA frontend frameworks.

If this is what you want only HTML and CSS solution

fiddle

Here's the HTML

<div class="outer-container"> <!-- absolute positioned container --> <div class="inner-container"> <div class="table-header"> <table id="headertable" width="100%" cellpadding="0" cellspacing="0"> <thead> <tr> <th class="header-cell col1">One</th> <th class="header-cell col2">Two</th> <th class="header-cell col3">Three</th> <th class="header-cell col4">Four</th> <th class="header-cell col5">Five</th> </tr> </thead> </table> </div> <div class="table-body"> <table id="bodytable" width="100%" cellpadding="0" cellspacing="0"> <tbody> <tr> <td class="body-cell col1">body row1</td> <td class="body-cell col2">body row2</td> <td class="body-cell col3">body row2</td> <td class="body-cell col4">body row2</td> <td class="body-cell col5">body row2 en nog meer</td> </tr> <tr> <td class="body-cell col1">body row1</td> <td class="body-cell col2">body row2</td> <td class="body-cell col3">body row2</td> <td class="body-cell col4">body row2</td> <td class="body-cell col5">body row2 en nog meer</td> </tr> <tr> <td class="body-cell col1">body row1</td> <td class="body-cell col2">body row2</td> <td class="body-cell col3">body row2</td> <td class="body-cell col4">body row2</td> <td class="body-cell col5">body row2 en nog meer</td> </tr> <tr> <td class="body-cell col1">body row1</td> <td class="body-cell col2">body row2</td> <td class="body-cell col3">body row2</td> <td class="body-cell col4">body row2</td> <td class="body-cell col5">body row2 en nog meer</td> </tr> <tr> <td class="body-cell col1">body row1</td> <td class="body-cell col2">body row2</td> <td class="body-cell col3">body row2</td> <td class="body-cell col4">body row2</td> <td class="body-cell col5">body row2 en nog meer</td> </tr> <tr> <td class="body-cell col1">body row1</td> <td class="body-cell col2">body row2</td> <td class="body-cell col3">body row2</td> <td class="body-cell col4">body row2</td> <td class="body-cell col5">body row2 en nog meer</td> </tr> <tr> <td class="body-cell col1">body row1</td> <td class="body-cell col2">body row2</td> <td class="body-cell col3">body row2</td> <td class="body-cell col4">body row2</td> <td class="body-cell col5">body row2 en nog meer</td> </tr> <tr> <td class="body-cell col1">body row1</td> <td class="body-cell col2">body row2</td> <td class="body-cell col3">body row2</td> <td class="body-cell col4">body row2</td> <td class="body-cell col5">body row2 en nog meer</td> </tr> <tr> <td class="body-cell col1">body row1</td> <td class="body-cell col2">body row2</td> <td class="body-cell col3">body row2</td> <td class="body-cell col4">body row2</td> <td class="body-cell col5">body row2 en nog meer</td> </tr> <tr> <td class="body-cell col1">body row1</td> <td class="body-cell col2">body row2</td> <td class="body-cell col3">body row2</td> <td class="body-cell col4">body row2</td> <td class="body-cell col5">body row2 en nog meer</td> </tr> <tr> <td class="body-cell col1">body row1</td> <td class="body-cell col2">body row2</td> <td class="body-cell col3">body row2</td> <td class="body-cell col4">body row2</td> <td class="body-cell col5">body row2 en nog meer</td> </tr> <tr> <td class="body-cell col1">body row1</td> <td class="body-cell col2">body row2</td> <td class="body-cell col3">body row2</td> <td class="body-cell col4">body row2</td> <td class="body-cell col5">body row2 en nog meer</td> </tr> <tr> <td class="body-cell col1">body row1</td> <td class="body-cell col2">body row2</td> <td class="body-cell col3">body row2</td> <td class="body-cell col4">body row2</td> <td class="body-cell col5">body row2 en nog meer</td> </tr> <tr> <td class="body-cell col1">body row1</td> <td class="body-cell col2">body row2</td> <td class="body-cell col3">body row2</td> <td class="body-cell col4">body row2</td> <td class="body-cell col5">body row2 en nog meer</td> </tr> <tr> <td class="body-cell col1">body row1</td> <td class="body-cell col2">body row2</td> <td class="body-cell col3">body row2</td> <td class="body-cell col4">body row2</td> <td class="body-cell col5">body row2 en nog meer</td> </tr> <tr> <td class="body-cell col1">body row1</td> <td class="body-cell col2">body row2</td> <td class="body-cell col3">body row2</td> <td class="body-cell col4">body row2</td> <td class="body-cell col5">body row2 en nog meer</td> </tr> <tr> <td class="body-cell col1">body row1</td> <td class="body-cell col2">body row2</td> <td class="body-cell col3">body row2</td> <td class="body-cell col4">body row2</td> <td class="body-cell col5">body row2 en nog meer</td> </tr> <tr> <td class="body-cell col1">body row1</td> <td class="body-cell col2">body row2</td> <td class="body-cell col3">body row2</td> <td class="body-cell col4">body row2</td> <td class="body-cell col5">body row2 en nog meer</td> </tr> <tr> <td class="body-cell col1">body row1</td> <td class="body-cell col2">body row2</td> <td class="body-cell col3">body row2</td> <td class="body-cell col4">body row2</td> <td class="body-cell col5">body row2 en nog meer</td> </tr> <tr> <td class="body-cell col1">body row1</td> <td class="body-cell col2">body row2</td> <td class="body-cell col3">body row2</td> <td class="body-cell col4">body row2</td> <td class="body-cell col5">body row2 en nog meer</td> </tr> <tr> <td class="body-cell col1">body row1</td> <td class="body-cell col2">body row2</td> <td class="body-cell col3">body row2</td> <td class="body-cell col4">body row2</td> <td class="body-cell col5">body row2 en nog meer</td> </tr> <tr> <td class="body-cell col1">body row1</td> <td class="body-cell col2">body row2</td> <td class="body-cell col3">body row2</td> <td class="body-cell col4">body row2</td> <td class="body-cell col5">body row2 en nog meer</td> </tr> <tr> <td class="body-cell col1">body row1</td> <td class="body-cell col2">body row2</td> <td class="body-cell col3">body row2</td> <td class="body-cell col4">body row2</td> <td class="body-cell col5">body row2 en nog meer</td> </tr> <tr> <td class="body-cell col1">body row1</td> <td class="body-cell col2">body row2</td> <td class="body-cell col3">body row2</td> <td class="body-cell col4">body row2</td> <td class="body-cell col5">body row2 en nog meer</td> </tr> <tr> <td class="body-cell col1">body row1</td> <td class="body-cell col2">body row2</td> <td class="body-cell col3">body row2</td> <td class="body-cell col4">body row2</td> <td class="body-cell col5">body row2 en nog meer</td> </tr> <tr> <td class="body-cell col1">body row1</td> <td class="body-cell col2">body row2</td> <td class="body-cell col3">body row2</td> <td class="body-cell col4">body row2</td> <td class="body-cell col5">body row2 en nog meer</td> </tr> <tr> <td class="body-cell col1">body row1</td> <td class="body-cell col2">body row2</td> <td class="body-cell col3">body row2</td> <td class="body-cell col4">body row2</td> <td class="body-cell col5">body row2 en nog meer</td> </tr> <tr> <td class="body-cell col1">body row1</td> <td class="body-cell col2">body row2</td> <td class="body-cell col3">body row2</td> <td class="body-cell col4">body row2</td> <td class="body-cell col5">body row2 en nog meer</td> </tr> <tr> <td class="body-cell col1">body row1</td> <td class="body-cell col2">body row2</td> <td class="body-cell col3">body row2</td> <td class="body-cell col4">body row2</td> <td class="body-cell col5">body row2 en nog meer</td> </tr> <tr> <td class="body-cell col1">body row1</td> <td class="body-cell col2">body row2</td> <td class="body-cell col3">body row2</td> <td class="body-cell col4">body row2</td> <td class="body-cell col5">body row2 en nog meer</td> </tr> <tr> <td class="body-cell col1">body row1</td> <td class="body-cell col2">body row2</td> <td class="body-cell col3">body row2</td> <td class="body-cell col4">body row2</td> <td class="body-cell col5">body row2 en nog meer</td> </tr> <tr> <td class="body-cell col1">body row1</td> <td class="body-cell col2">body row2</td> <td class="body-cell col3">body row2</td> <td class="body-cell col4">body row2</td> <td class="body-cell col5">body row2 en nog meer</td> </tr> <tr> <td class="body-cell col1">body row1</td> <td class="body-cell col2">body row2</td> <td class="body-cell col3">body row2</td> <td class="body-cell col4">body row2</td> <td class="body-cell col5">body row2 en nog meer</td> </tr> <tr> <td class="body-cell col1">body row1</td> <td class="body-cell col2">body row2</td> <td class="body-cell col3">body row2</td> <td class="body-cell col4">body row2</td> <td class="body-cell col5">body row2 en nog meer</td> </tr> <tr> <td class="body-cell col1">body row1</td> <td class="body-cell col2">body row2</td> <td class="body-cell col3">body row2</td> <td class="body-cell col4">body row2</td> <td class="body-cell col5">body row2 en nog meer</td> </tr> </tbody> </table> </div> </div> </div> 

And this is the css

body { margin:0; padding:0; height: 100%; width: 100%; } table { border-collapse: collapse; /* make simple 1px lines borders if border defined */ } tr { width: 100%; } .outer-container { background-color: #ccc; position: absolute; top:0; left: 0; right: 300px; bottom:40px; overflow: scroll; } .inner-container { width: 100%; height: 100%; position: relative; overflow-x: visible; overflow-y:visible; } .table-header { float:left; width: 100%; } .table-body { float:left; height: auto; width: auto; overflow: visible; background-color: red; } .header-cell { background-color: yellow; text-align: left; height: 40px; } .body-cell { background-color: transparent; text-align: left; } .col1, .col3, .col4, .col5 { width:120px; min-width: 120px; } .col2 { min-width: 300px; } 

Let me know if this is what you need. Or some thing is missing. I went through the other answers and found that jquery has been used . I took it on assumption that you need css solution . If I am missing any more point please mention :)