I have tried looking all over the place and couldn't find a good solution to my problem. I am looking to create a table with fixed headers that stay while scrolling the rest of the table. The problem is I also want it to be able to be aligned when the page window adjusts. I have been able to get fixed headers and have been able to get columns to align when I adjust the window, just haven't be able to get both to work together. Is there a script out there that can do this? I have tried fixedheadertable jquery, flexigrid, fixed-header-coffee, chromatable and floatyhead. None of these were able to give me the solution I am looking for. Maybe I am doing something wrong but I have a traditional table using theader, tbody, etc. I would like to avoid splitting up the table into two tables, because it seems they never line up properly but if that's the only solution, I'll take it.
Please help!
Try this answer, It is working in IE8, Firefox and Chrome..
Style
.Container { margin-left: 200px; background-color: green; overflow: scroll; overflow-x: hidden; height: 200px; }
.BigTable { width: 100%; }
.BigTable td { width: 40%; }
.BigTable td + td { width: 30%; }
.BigTable td + td + td { width: 30%; }
.Header { margin-left: 200px; height: 30px; background-color: blue; }
.Header .Heading { width: 40%; float: left; height: 30px; }
.Header .Heading + .Heading { width: 30%; }
.Header .Heading + .Heading + .Heading { width: 30%; }
Table
<div class="Header">
<div class="Heading">Heading 1</div>
<div class="Heading">Heading 2</div>
<div class="Heading">Heading 3</div>
</div>
<div class="Container">
<table class="BigTable">
<tbody class="scrollContent">
<tr class="normalRow">
<td>Cell Content 1</td>
<td>Cell Content 2</td>
<td>Sep 16, 2007 01:54 AM</td>
</tr>
<tr class="alternateRow">
<td>More Cell Content 1</td>
<td>More Cell Content 2</td>
<td>Sep 16, 2007 01:54 AM</td>
</tr>
<tr class="normalRow">
<td>Even More Cell Content 1</td>
<td>Even More Cell Content 2</td>
<td>Sep 16, 2007 01:54 AM</td>
</tr>
<tr class="alternateRow">
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>Sep 16, 2007 01:54 AM</td>
</tr>
<tr class="alternateRow">
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>Sep 16, 2007 01:54 AM</td>
</tr>
<tr class="alternateRow">
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>Sep 16, 2007 01:54 AM</td>
</tr>
<tr class="alternateRow">
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>Sep 16, 2007 01:54 AM</td>
</tr>
<tr class="alternateRow">
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>Sep 16, 2007 01:54 AM</td>
</tr>
<tr class="alternateRow">
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>Sep 16, 2007 01:54 AM</td>
</tr>
<tr class="alternateRow">
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>Sep 16, 2007 01:54 AM</td>
</tr>
<tr class="alternateRow">
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>Sep 16, 2007 01:54 AM</td>
</tr>
<tr class="alternateRow">
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>Sep 16, 2007 01:54 AM</td>
</tr>
<tr class="alternateRow">
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>Sep 16, 2007 01:54 AM</td>
</tr>
<tr class="alternateRow">
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>Sep 16, 2007 01:54 AM</td>
</tr>
<tr class="alternateRow">
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>Sep 16, 2007 01:54 AM</td>
</tr>
<tr class="alternateRow">
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>Sep 16, 2007 01:54 AM</td>
</tr>
<tr class="alternateRow">
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>Sep 16, 2007 01:54 AM</td>
</tr>
<tr class="alternateRow">
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>Sep 16, 2007 01:54 AM</td>
</tr>
<tr class="alternateRow">
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>Sep 16, 2007 01:54 AM</td>
</tr>
<tr class="alternateRow">
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>Sep 16, 2007 01:54 AM</td>
</tr>
<tr class="alternateRow">
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>Sep 16, 2007 01:54 AM</td>
</tr>
</tbody>
</table>
</div>
or try this
#listBevel, #listTable {
position: absolute;
z-index: 2;
border: 1px solid #989898;
top: 85px;
left: 227px;
right: 37px;
height: 270px;
min-width: 654px;
}
/* @group List Table Headers */
#listTableHeaders {
position: absolute;
z-index: 3;
top: 67px;
left: 39px;
right: 37px;
height: 500px;
min-width: 654px;
border: 1px solid #989898;
overflow: hidden;
overflow-y: scroll;
}
.tableHeaderShadow {
background: url(/images/interface/bevel_shadow.png) repeat-x;
position: fixed;
height: 5px;
top: 105px;
right: 53px;
left: 228px;
min-width: 639px;
}
#scrollBarCoverContainer {
position: fixed;
z-index: 5;
top: 86px;
left: 228px;
right: 38px;
height: 0;
min-width: 654px;
font-size: 11px;
border: 1px none #989898;
text-align: right;
}
#scrollBarCoverUp {
background: url(/images/interface/list_header_bg.png) repeat-x;
width: 14px;
height: 18px;
border-left: 1px solid #e5e5e5;
float: right;
}
table#entryListHeaders th img.sortArrow {
float: right;
}
table#entryListHeaders th a {
color: #000;
text-decoration: none;
display: block;
height: 18px;
}
table#entryListHeaders th:hover {
background-position: 0 -18px;
cursor: default;
}
table#entryListHeaders th {
background: url(/images/interface/list_header_bg.png) repeat-x;
border-left: 1px solid #e5e5e5;
border-right: 1px solid #a5a5a5;
text-align: left;
padding: 0 5px;
margin: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
height: 18px;
width: 42%;
font-size: 11px;
line-height: 1.6em;
text-shadow: #fff 0 1px 0;
}
table#entryListHeaders th + th {
width: 32%;
}
table#entryListHeaders th.selectedHeader {
text-shadow: #d8e6ff 0 1px 0;
background-image: url(/images/interface/list_header_selected.png);
border-left-color: #c2d4f2;
}
#listTable {
background-color: #fefefe;
top: 104px;
height: 251px;
overflow: auto;
overflow-x: hidden;
overflow-y: scroll;
font-size: 11px;
border-collapse: collapse;
}
table#entryList {
}
table#entryList td {
width: 42%;
}
span.truncateText {
display: block;
height: 18px;
overflow: hidden;
}
tbody.scrollContent td, tbody.scrollContent tr.normalRow td {
border-right: 1px hidden #cbd1d8;
padding: 1px 5px;
height: 18px;
line-height: 1.6em;
margin: 0;
border-left-style: hidden;
border-left-width: 1px;
}
tbody.scrollContent tr.alternateRow {
background: #eaf2ff;
}
tbody.scrollContent tr.selectedRow td {
background: url(/images/interface/selected_row.png) repeat-x;
color: #fff;
border-right-style: hidden;
}
table#entryList td + td {
width: 32%;
}
tbody.scrollContent tr:hover, tbody.scrollContent tr.alternateRow:hover {
background-color: #d8e7ff;
cursor: default;
}
<div id="scrollBarCoverContainer">
<div id="scrollBarCoverUp"></div>
<div class="tableHeaderShadow"></div>
</div>
<div id="listTableHeaders">
<table id="entryListHeaders" border="0" cellpadding="0" cellspacing="0" width="100%">
<thead class="fixedHeader">
<tr>
<th id="selectedHeader">Name</th>
<th>Domain</th>
<th>>Modified</th>
</tr>
</thead>
<tbody class="scrollContent">
<tr class="normalRow">
<td>Cell Content 1</td>
<td>Cell Content 2</td>
<td>Sep 16, 2007 01:54 AM</td>
</tr>
<tr class="alternateRow">
<td>More Cell Content 1</td>
<td>More Cell Content 2</td>
<td>Sep 16, 2007 01:54 AM</td>
</tr>
<tr class="normalRow">
<td>Even More Cell Content 1</td>
<td>Even More Cell Content 2</td>
<td>Sep 16, 2007 01:54 AM</td>
</tr>
<tr class="alternateRow">
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>Sep 16, 2007 01:54 AM</td>
</tr>
<tr class="alternateRow">
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>Sep 16, 2007 01:54 AM</td>
</tr>
<tr class="alternateRow">
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>Sep 16, 2007 01:54 AM</td>
</tr>
<tr class="alternateRow">
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>Sep 16, 2007 01:54 AM</td>
</tr>
<tr class="alternateRow">
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>Sep 16, 2007 01:54 AM</td>
</tr>
<tr class="alternateRow">
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>Sep 16, 2007 01:54 AM</td>
</tr>
<tr class="alternateRow">
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>Sep 16, 2007 01:54 AM</td>
</tr>
<tr class="alternateRow">
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>Sep 16, 2007 01:54 AM</td>
</tr>
<tr class="alternateRow">
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>Sep 16, 2007 01:54 AM</td>
</tr>
<tr class="alternateRow">
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>Sep 16, 2007 01:54 AM</td>
</tr>
<tr class="alternateRow">
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>Sep 16, 2007 01:54 AM</td>
</tr>
<tr class="alternateRow">
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>Sep 16, 2007 01:54 AM</td>
</tr>
<tr class="alternateRow">
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>Sep 16, 2007 01:54 AM</td>
</tr>
<tr class="alternateRow">
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>Sep 16, 2007 01:54 AM</td>
</tr>
<tr class="alternateRow">
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>Sep 16, 2007 01:54 AM</td>
</tr>
<tr class="alternateRow">
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>Sep 16, 2007 01:54 AM</td>
</tr>
<tr class="alternateRow">
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>Sep 16, 2007 01:54 AM</td>
</tr>
<tr class="alternateRow">
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>Sep 16, 2007 01:54 AM</td>
</tr>
</tbody>
</table>
</div>