html5 - Create fixed header table html -
i creating fixed header table, header , data not seem aligned. table created dynamically. here sample of generated html -
what think should ?
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <style> /*spreadsheet*/ .row:nth-child(odd) { background: rgba(0,0,0,0.05); } /* can define rule */ .bodytable td { white-space: normal; /*text-overflow: ellipsis;*/ overflow: hidden; word-spacing: normal; font-family: sans-serif; font-size: 14px; text-align: right; } .bodytable tr { height: 20px; } .bodytable tr:hover { background-color: rgba(0,0,0,0.3); } .headertable { text-align: justify; vertical-align: middle; word-spacing: normal; border-spacing: 0px; border-style: solid; caption-side: top; word-wrap:break-word; border-collapse: collapse; font-family: sans-serif; font-size: 10px; } .th { background-color: red; } .scroll { overflow: auto; } </style> </head> <body> <div id="tabletag"> <table width="1903px"> <tr> <td> <table class="headertable" width="1878px"> <tr> <th> sample1 </th> <th> sample2 </th> <th> sample3 </th> <th> sample </th> <th> testsample </th> <th> column2 </th> <th> column3 </th> <th> column4 </th> </tr> </table> </td> </tr> <tr> <td style="text-align: center;"> <div class="scroll" width="1903px" style="height: 200px;"> <table class="bodytable" border="0" width="1878px" height="200px" style="table-layout: fixed"> <tbody> <tr class="row"> <td> 54.29204 </td> <td> 76.806827 </td> <td> 31.127742 </td> <td> -0.409866 </td> <td> 2.965601 </td> <td> 6.696099 </td> <td> - 0.947771 </td> <td> 9.713368 </td> </tr> <tr class="row"> <td> 72.082179 </td> <td> 68.104432 </td> <td> 16.588382 </td> <td> - 0.564589 </td> <td> 5.759212 </td> <td> 7.916862 </td> <td> - 0.706712 </td> <td> 3.840213 </td> </tr> </tbody> </table> </div> </td> </tr> </table> </div> </body> </html>
one simple solution if know every table have 8 columns in (like have in example code) can set header-table columns , body-table columns same widths align properly. in case 8 columns use width:12.5% each of columns same width. css code this:
.headertable th { background-color: lightblue; width:12.5%; } .bodytable td { white-space: normal; /*text-overflow: ellipsis;*/ overflow: hidden; word-spacing: normal; font-family: sans-serif; font-size: 14px; text-align: right; width:12.5%; }
Comments
Post a Comment