Long Awaited - HTML Table with Fixed/Static Headers

It is like a dream come true for me :P. I had strived a lot in the past to create a html table with fixed/static headers and all I was able to do was a close stuff with complex javascript codes manipulating the HTML DOM etc. The challenge was the <th> tag never seemed to respond to my CSS alterations ever. It would stay inert and make me look like an idiot lol. There were times when I got fed up with the great internet explorer as the same code that would work perfectly with other modern browsers would fail with IE. At last with lots of moral support and moral push, I crossed the confidence/patience threshold required to make CSS work for the <th> tags lol.

 

Following is a simple mockup that helped me produce my test table with a fixed header. My research ended up with usage of expression tags in CSS for most scenarios and none worked for me.

I made some tweaks to what I obtained and the key was “DO NOT USE DOCTYPE TAGS IN YOUR HTML FILE” and “top: expression(( document.getElementById ( "tableContainingDivID").scrollTop-1)+"px");”

 

I used the following in the styles in my html file

 

.ozinisleFixedheader {position: relative;height: 17px !important;font-size: 11px !important;font-weight: bold;background: #eee;border: 1px solid #e3e3e3;border-collapse: collapse; vertical-align: bottom;padding: 2px 10px;color: #666;font-family: Arial, Verdana, Helvetica, sans-serif;top: expression(( document.getElementById ( "myTableContainerDivId").scrollTop-1)+"px");text-align: left;letter-spacing: nowrap:nowrap;}

/*following stuffs are to give a decent look and feel for my test table – and has nothing to do with the topic of interest here*/

.tableclass {display: block;border: 1px solid #ccc;border-collapse: collapse;width: 100%;border-left: 1px;border-bottom: 1px;border-right: 1px;}

table.tableclass {background-color: white;width: 100%;overflow-x: hidden;overflow-y: auto;}

table.tableclass tr:nth-child(even) {background: #f1f1f1}

table.tableclass tr:nth-child(odd) {background: #fff}

table.tableclass td {background: none}

.tableclass tbody td {height: 26px;}

.tableclass tbody {border: 1px solid #ccc;border-collapse: collapse;font-size: 11px;overflow: auto;}

 

Then I used a div tag with the following specifications

<div id= myTableContainerDivId ' style='width: 600px; height: 115px; padding-bottom: 4px; border: 1px solid #c2c2c2; overflow: auto;'></div>

 

Then I added a table with style class set to ‘tableclass’ like the following inside the div tag described above

<table class=’tableclass’></table>

 

Then use a thead>tr>th tag to define your headers with style class “ozinisleFixedheader” which might look somewhat like

<thead ><tr><th class="ozinisleFixedheader">header</th></tr></thead>

 

Then define your tbody tag and put in some junk contents, enough to enable you to scroll down. My junk content looks somewhat like the following

<tbody><tr><td>content</td ></tr></tbody>

 

And of course you can use <colgroup> tags to set width to your tables.

 

Tada… that’s how my table was with fixed header was built. Happy enough to party out that I got this one long awaited working prototype. At least I don’t have to pay now for this stuff J