How to: Fixed Table Header with ONE table (no jQuery)

Question

I know, there are at least 3 dozen questions like this on stackoverflow and still, I could not make this happen:

A simple table where thead is sticked/fixed at the top, and the tbody is scrolled. I tried so much in the past days and now I ended up here crying for help.

A solution should work in IE8+ and newest FF, Chrome & Safari. The difference to other "possible duplicates like this one is that I don't want to use two nested tables or jQuery (plain javascript is fine though).

Demo of what I want:
http://www.imaputz.com/cssStuff/bigFourVersion.html.

Problem is it doesn't work in IE, and I would be fine to use some JS.

Answer 1

Ok i got it:

You need to wrap the table in two DIVs:

<div class="outerDIV">
  <div class="innerDIV">
    <table></table>
  </div>
</div>

The CSS for the DIVs is this:

.outerDIV {
  position: relative;
  padding-top: 20px;   //height of your thead
}
.innerDIV {
  overflow-y: auto;
  height: 200px;       //the actual scrolling container
}

The reason is, that you basically make the inner DIV scrollable, and pull the THEAD out of it by sticking it to the outer DIV.

Now stick the thead to the outerDIV by giving it

table thead {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
}

The tbody needs to have display: block as well.

Now you'll notice that the scrolling works, but the widths are completely messep up. That's were Javascript comes in. You can choose on your own how you want to assign it. I for myself gave the TH's in the table fixed widths and built a simple script which takes the width and assigns them to the first TD-row in the tbody.

Something like this should work:

function scrollingTableSetThWidth(tableId)
{
    var table = document.getElementById(tableId);

    ths = table.getElementsByTagName('th');
    tds = table.getElementsByTagName('td');

    if(ths.length > 0) {
        for(i=0; i < ths.length; i++) {
            tds[i].style.width = getCurrentComputedStyle(ths[i], 'width');
        }
    }
}

function getCurrentComputedStyle(element, attribute)
{
    var attributeValue;
    if (window.getComputedStyle) 
    { // class A browsers
        var styledeclaration = document.defaultView.getComputedStyle(element, null);
        attributeValue = styledeclaration.getPropertyValue(attribute);
    } else if (element.currentStyle) { // IE
        attributeValue = element.currentStyle[vclToCamelCases(attribute)];
    }
    return attributeValue;
}

With jQuery of course this would be a lot easier but for now i was not allowed to use a third party library for this project.

Answer 2

Maybe we should change a method to archieve this goal.Such as:

<div><ul><li>1</li><li>2</li></ul></div> //make it fixed
<table>
    <thead>
        <tr><th>1</th><th>2</th></tr>
    </thead>
    <tfoot></tfoot>
    <tbody></tbody>
</table>

Of course, this is not good to sematic.But it is the simplest way without js or jq. Don't you think so?