html - Align table headers to the rows -
i trying create table fixed row headers (so during scrolling column heading stay) , have been able achieve but table headers not aligned rows below. have created jsfiddle that. output like:
here sample extracted html.
<head> <style> table { /*background-color: #aaa;*/ width: 800px; } tbody { /*background-color: #ddd;*/ height: 200px; width: 800px; overflow: auto; } td { } thead > tr, tbody { display: block; } </style> </head> <body> <div id="containerdiv" style="width: 800px"> <table id="dynamictable"> <thead> <tr> <th> id </th> <th> title </th> <th> media title </th> <th> broadcast time </th> <th> destination </th> <th> channel </th> <th> start time </th> <th> end time </th> </tr> </thead> <tbody id="tablebody"> <tr id="0"> <td> id: 0 </td> <td> content </td> <td> more contents </td> <td> more contents contents contents </td> <td> more contents contents contents </td> <td> more contents contents contents </td> <td> more contents contents contents </td> <td> more contents contents contents </td> </tr> <tr id="1"> <td > id: 1 </td> <td> content </td> <td> more contents </td> <td> more contents contents contents </td> <td> more contents contents contents </td> <td> more contents contents contents </td> <td> more contents contents contents </td> <td> more contents contents contents </td> </tr> <tr id="tr1"> <td> id: 1 </td> <td> content </td> <td> more contents </td> <td> more contents contents contents </td> <td> more contents contents contents </td> <td> more contents contents contents </td> <td> more contents contents contents </td> <td> more contents contents contents </td> </tr> </tbody> </table> </div> </body>
try this:
html:
<body> <div id="containerdiv" style="width: 800px"> <table id="dynamictable"> <tr> <td style="width: 100px"> id </td> <td style="width: 300px"> title </td> <td style="width: 300px"> media title </td> <td> broadcast time </td> <td> destination </td> <td> channel </td> <td> start time </td> <td> end time </td> </tr> </table> <div class="scroll"> <table id="tablebody"> <tr id="0"> <td style="width: 100px"> id: 0 </td> <td style="width: 300px"> content </td> <td style="width: 300px"> more contents </td> <td> more contents contents contents </td> <td> more contents contents contents </td> <td> more contents contents contents </td> <td> more contents contents contents </td> <td> more contents contents contents </td> </tr> <tr id="1"> <td style="width: 100px"> id: 1 </td> <td style="width: 300px"> content </td> <td style="width: 300px"> more contents </td> <td> more contents contents contents </td> <td> more contents contents contents </td> <td> more contents contents contents </td> <td> more contents contents contents </td> <td> more contents contents contents </td> </tr> <tr id="tr1"> <td style="width: 100px"> id: 1 </td> <td style="width: 300px"> content </td> <td style="width: 300px"> more contents </td> <td> more contents contents contents </td> <td> more contents contents contents </td> <td> more contents contents contents </td> <td> more contents contents contents </td> <td> more contents contents contents </td> </tr> </table> </div> </div> </body> css:
table { /*background-color: #aaa;*/ width: 780px; } .scroll { height: 200px; width: 800px; overflow: scroll; overflow-x: hidden; border: 1px solid #ccc; } #dynamictable { font-weight: bold; } }
Comments
Post a Comment