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.


Comments

Popular posts from this blog

linux - Mailx and Gmail nss config dir -

c# - Is it possible to remove an existing registration from Autofac container builder? -

php - Mysql PK and FK char(36) vs int(10) -