CODEWITHSUNDEEP
javascripthtmlcss
Tony77
Tony77

Reputation: 311

Static Html Table Header Code

I want to have the headers of this html table fixed, so as I scroll down and the headers remain static.

My table header HTML:

<table style="width: 425px; height: 4810px;" border="0">
<tbody>
<tr class="tableizer-firstrow">
<th colspan="3">
<div style="text-align: left; text-color: #00A599;"><span style="color: #00a599;">SEPTEMBER 2011 Anniversaries</span></div>
</th>
</tr>
<tr>
<th class="style1" style="text-align: center" width="143">Employee</th><th style="text-align: center" width="137">Department</th><th style="text-align: center" width="92">DOH</th><th width="49">Years</th>
</tr>
<tr>

Upvotes: 1

Views: 1493

Answers (2)

Jason Kaczmarsky
Jason Kaczmarsky

Reputation: 1686

You could separate the table from the header and have 2 tables, 1 with just the heading. Then for the content table you could put it in a DIV, and use CSS to make it scrollable.

http://jsfiddle.net/cm3Wu/

However you would have to manually assign widths to the TD elements since the header is split.

Upvotes: 0

Timbo
Timbo

Reputation: 4533

Guessing from your question that you want fixed headers?

Take a look at the jQuery Scrollable Table Plugin if you can use jQuery in your solution.

Upvotes: 2

Related Questions