css - HTML table, horizontal scroll which tracks headings and vertical scroll- problem with text width -

ok firstly apologies if recognise of earlier posts today. have piece of html wrote, seemed way this.

• horizontal scroll follows keeps thead aligned tbody move tbody.
• vertical scroll still keeps thead in view.

the way using 2 tables. works , feel free try it. however, have problem way in widths of columns being determined size of text inside them , not width property set. can help?

i want width of column mean width of column

edit: reason 1200 widths because inside overflow div actual size 8x 150px

    <script type='text/javascript'>         function matchscroll(sourceid, targetid, doifmoz) {                 if (doifmoz || navigator.useragent.indexof("firefox") == -1) document.getelementbyid(targetid).scrollleft = document.getelementbyid(sourceid).scrollleft;         }     </script>      <div id='headertable'  style='width:883px;overflow:auto;overflow-y:hidden;overflow-x:hidden;'>         <table border='1'   id='headertable' style='width:1200px;float:left;table-layout:fixed;'>             <thead style='text-align:left;'>                 <tr style='display:block;margin-left:1px;'>                     <th width='150' style='width:150px;'>t</th>                     <th width='150' style='width:150px;'>t</th>                     <th width='150' style='width:150px;'>tt</th>                     <th width='150' style='width:150px;'>t</th>                     <th width='150' style='width:150px;'>t</th>                     <th width='150' style='width:150px;'>ttttt</th>                     <th width='150' style='width:150px;'>ttttt</th>                     <th width='150' style='width:150px;'>tt</th>                 </tr>             </thead>         </table>     </div>     <div id='datatable' style='height:300px;float:left;overflow:auto;overflow-x:auto;overflow-y:scroll;width:900px;'  onmouseup="matchscroll('datatable','headertable', true);" onmousemove="matchscroll('datatable','headertable', false);"     >         <table border='1' style='width:1200px;float:left;table-layout:fixed;'>             <tbody id='cleardetails'>                 <tr id='row0' style='color:black;height:auto;display:block;'>                     <td style='width:150px;'>1</td>                     <td style='width:150px;'>1</td>                     <td style='width:150px;'>1</td>                     <td style='width:150px;'>1</td>                     <td style='width:150px;'>1111111111</td>                     <td style='width:150px;'>1</td>                     <td style='width:150px;'>1</td>                     <td style='width:150px;'>1</td>                 </tr>             </tbody>         </table>     </div> 

i don't know how big whole project is, there jquery datatable plugin solve problem.

it has lot of options working tables. suggest use "jquery.min" file if want implement few options.