css - First row of table disappears once the column headers are fixed (sticky header) -
i need help,
i can't seem figure out why first row in table (abc-123-123456) disappears or appears hidden once top columns fixed. work uses ie7 still need able have 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> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td>100%</td> <td>yes</td> </tr><!-- table row --> <tr> <td>abc-123-942471</td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td>100%</td> <td>yes</td> </tr><!-- darker table row --> <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 --> </table> </body> </html>
add
#data tbody{ position: absolute; top: 24px; } 
Comments
Post a Comment