Looking for a solution that provides a fixed header and frozen pane within a table, similar to the example at . However, I need the header to scroll horizontally with the body of the table.
Here is an example based on the aforementioned link. The problem here is that the header does not follow the scrolling direction of the table's body.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<style type="text/css">
.outer
{
position:relative;
padding-top: 50px;
border: 1px solid #0000ff;
}
.innera
{
overflow:auto;
height: 100px;
border: 1px solid #00ff00;
}
.outer thead tr
{
position:absolute;
top: 0px;
left:0;
}
.outer th, .outer td
{
text-align:left;
white-space:nowrap;
}
</style>
</head>
<body>
<div class="outer">
<div class="innera">
<table >
<thead>
<tr>
<th scope="col">FLIGHT CODE</th>
<th scope="col">FROM</th>
<th scope="col">STA</th>
<th scope="col">ETA</th>
<th scope="col" class="nd">Notes</th>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="5">DATE : 19th OCTOBER 2005</td>
</tr>
</tfoot>
<tbody>
<tr>
<th scope="row">T3 4264</th>
<td>ISLE OF MAN</td>
<td>11:40</td>
<td>11:42</td>
<td>LANDED AT 11:43</td>
</tr>
<tr class="dk">
<th scope="row">BA 4081</th>
<td>PARIS-CDG</td>
<td>11:45</td>
<td>11:57</td>
<td>LANDED AT 11:58</td>
</tr>
<!-- Rest of the code omitted for brevity -->
</table>
</div>
</div>
</body>
</html>