John Smith John Smith - 13 days ago 7
CSS Question

First row of table disappears once the column headers are fixed (sticky header)

I need your help,

I can't seem to figure out as to why the first row in the table (ABC-123-123456) disappears or appears to be hidden once the top columns are fixed. As my work uses IE7 still I need to be able to have a browser compliant sticky column headers.

<!DOCTYPE html>

<html>

<head>

<style type="text/css">
#data_container {
margin-top: 5px;
width: 100%;
height: 200px;
overflow-x: scroll;
overflow-y: scroll;
border: 1px solid #ccc;

position: relative;

color: rgb(60,60,60);
font-size: 9pt;
}

#data {
border-collapse:collapse;
border-spacing: 0;
border-right: 1px solid #ccc;
table-layout: fixed;
}
#data th {
border-bottom:1px solid #ccc;
border-left: 1px solid #ccc;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff", endColorstr="#dcdcdc");
font-weight: normal;
}
#data tr {
text-align: center;
}
#data td {
border-bottom:1px solid #ccc;
border-left: 1px solid #ccc;
text-align: left;
padding-left: 6px;
}

#data tr:hover td { background: #f2f2f2; }

#data th, #data td {
height: 20px;
width: 130px;
}
#data tr td:first-child, #data tr th:first-child {
border-left: 0;
}

#data thead tr {
top:expression(this.offsetParent.scrollTop);
position: absolute;
}

#data tr:first-child td {
border-top: 0;
}

</style>

</head>

<body>
<div id="data_container">

<table id="data">

<!-- Table Header -->
<thead>
<tr>
<th data-sort="string">File Number</th>
<th>Test Column</th>
<th>Request Type</th>
<th>Resize This</th>
<th>Firstname</th>
<th>Lastname</th>
<th data-sort="string">Progress</th>
<th>Vital Task</th>
</tr>
</thead>
<!-- Table Header -->

<!-- Table Body -->
<tbody>

<tr>
<td>ABC-123-123456</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>100%</td>
<td>Yes</td>
</tr><!-- Table Row -->

<tr>
<td>ABC-123-942471</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>100%</td>
<td>Yes</td>
</tr><!-- Darker Table Row -->

<tr>
<td>ABC-123-408126</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>20%</td>
<td>No</td>
</tr>

<tr>
<td>ABC-123-396225</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>80%</td>
<td>No</td>
</tr>

<tr>
<td>ABC-123-385417</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>

<tr>
<td>ABC-123-374250</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>

<tr>
<td>ABC-123-408970</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>

<tr>
<td>ABC-123-404552</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>

<tr>
<td>ABC-123-403102</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>100%</td>
<td>Yes</td>
</tr>

<tr>
<td>ABC-123-404555</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>23%</td>
<td>yes</td>
</tr>

<tr>
<td>ABC-123-406789</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>80%</td>
<td>No</td>
</tr>

<tr>
<td><a href="#yep-iit-doesnt-exist">Hyperlink Example</a></td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>80%</td>
<td><a href="#inexistent-id">Another</a></td>
</tr>

</tbody>
<!-- Table Body -->

</table>
</body>

</html>

Answer

add this

#data tbody{
position: absolute;
top: 24px;
}