一旦列标题被修复，第一行表就会消失（粘性标题）(First row of table disappears once the column headers are fixed (sticky head

一旦列标题被修复，第一行表就会消失（粘性标题）(First row of table disappears once the column headers are fixed (sticky header))

我需要你的帮助，

我似乎无法弄清楚为什么表格中的第一行（ABC-123-123456）在顶部列被修复后消失或者似乎隐藏起来。由于我的工作仍然使用IE7，我需要能够使用符合浏览器标准的粘性列标题。

<!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">  <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>   <tbody> <tr> <td>ABC-123-123456</td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td>100%</td> <td>Yes</td> </tr> <tr> <td>ABC-123-942471</td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td>100%</td> <td>Yes</td> </tr> <tr> <td>ABC-123-408126</td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td>20%</td> <td>No</td> </tr> <tr> <td>ABC-123-396225</td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td>80%</td> <td>No</td> </tr> <tr> <td>ABC-123-385417</td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td>ABC-123-374250</td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td>ABC-123-408970</td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td>ABC-123-404552</td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td>ABC-123-403102</td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td>100%</td> <td>Yes</td> </tr> <tr> <td>ABC-123-404555</td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td>23%</td> <td>yes</td> </tr> <tr> <td>ABC-123-406789</td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td>80%</td> <td>No</td> </tr> <tr> <td><a href="#yep-iit-doesnt-exist">Hyperlink Example</a></td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td>80%</td> <td><a href="#inexistent-id">Another</a></td> </tr> </tbody>  </table> </body> </html>

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">  <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>   <tbody> <tr> <td>ABC-123-123456</td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td>100%</td> <td>Yes</td> </tr> <tr> <td>ABC-123-942471</td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td>100%</td> <td>Yes</td> </tr> <tr> <td>ABC-123-408126</td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td>20%</td> <td>No</td> </tr> <tr> <td>ABC-123-396225</td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td>80%</td> <td>No</td> </tr> <tr> <td>ABC-123-385417</td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td>ABC-123-374250</td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td>ABC-123-408970</td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td>ABC-123-404552</td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td>ABC-123-403102</td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td>100%</td> <td>Yes</td> </tr> <tr> <td>ABC-123-404555</td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td>23%</td> <td>yes</td> </tr> <tr> <td>ABC-123-406789</td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td>80%</td> <td>No</td> </tr> <tr> <td><a href="#yep-iit-doesnt-exist">Hyperlink Example</a></td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td>80%</td> <td><a href="#inexistent-id">Another</a></td> </tr> </tbody>  </table> </body> </html>