HTML Scrollable table vertically and horizontally -


i thought had achieved this, method used wasnt correct. separated table head , table data 2 separate tables, each closed within div. put overflow on outside div of each table-segment. however, doesnt work because when have large number of columns, begins squeeze columns together, whereas still want them fix width. can help? ive omitted event listeners in code below.

<div id='headertable' style='overflow:auto;overflow-x:hidden;overflow-y:scroll;width:900px;'>     <table border='1' style='width:1900px;float:left;'>         <thead style='text-align:left;'>             <tr style='display:block;'>                 <th width='100' style='width:100px;'>test1</th>                 <th width='100' style='width:100px;'>test2</th>                 <th width='100' style='width:100px;'>test3</th>                 <th width='100' style='width:100px;'>test4</th>                 <th width='100' style='width:100px;'>test5</th>                 <th width='100' style='width:100px;'>test6</th>                 <th width='100' style='width:100px;'>test7</th>                 <th width='100' style='width:100px;'>test8</th>                 <th width='100' style='width:100px;'>test9</th>             </tr>         </thead>     </table> </div>  <div id='datatable' style='height:300px;float:left;overflow:auto;overflow-x:auto;overflow-y:scroll;width:900px;>     <table border='1' style='width:1900px;float:left;'>         <tbody id='cleardetails'>             <tr id='row0'    style='color:black;height:auto;display:block;'>                 <td style='width:100px;'>1</td>                 <td id='row0col0' style='width:100px;'>1625</td>                 <td id='row0col0' style='width:100px;'>25</td>                 <td id='row0col0' style='width:100px;'>25</td>                 <td id='row0col0' style='width:100px;'>25</td>                 <td id='row0col0' style='width:100px;'>25</td>                 <td id='row0col0' style='width:100px;'>25</td>                 <td id='row0col0' style='width:100px;'>25</td>                 <td id='row0col0' style='width:100px;'>25</td>                 <td id='row0col0' style='width:100px;'>25</td>             </tr>         </tbody>     </table> </div> 

first of all, don't have separate 2 different divs: check out pure css table fixed header.

second, why table in 1 location listed 1900, , in set 900?

third, have turned off margins , padding make sure blocks 100px?

finally, in ie have account width of scrollbar, need reduce size of each column, or increase width of overall table accommodate it.


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) -