Fixed Table Headers

HTML & CSS
1

The best examples of fixed table headers I have come across are here:

http://www.pmob.co.uk/temp/table-fixed-header-example.htm

In these examples the headers do not scroll horizontally. Does anyone know a good solution?

2

Hi, Welcome to SitePoint!

Looking at Paul’s example (that first link you gave), I don’t think you are going to be able to get the table header to scroll left. It looks like that was the reason he had made this comment on the page.

The table can be a fluid length and will resize within reasonable limits accordingly.
The problem (which is also the solution) is that the header data is nested in <p> tags which are absolute positioned. The way the overflow properties are set up on .wrap and .inner you can’t change their values or the method breaks.

I got close by adding overflow-x:auto; to .wrap but the 100% widths on .inner and table cause gaps on the right when you scroll left.

.wrap {
    margin:50px auto;
    width:80%;
    position:relative;
    height:200px;
    [COLOR=Blue]overflow:hidden;[/COLOR]
    [COLOR=DarkGreen]overflow-x:auto;[/COLOR] 
    padding:25px 0 0;
    background:#ffffcc;
    border:1px solid #000;
}
.inner {
    width:100%;
    height:200px;
    [COLOR=Blue]overflow:auto;[/COLOR]
}