css - How to make fixed header table inside scrollable div? -
i want make header of table fixed. table present inside scrollable div. below code.
<div id="table-wrapper"> <div id="table-scroll"> <table bgcolor="white" border="0" cellpadding="0" cellspacing="0" id="header-fixed" width="100%" overflow="scroll" class="scrolltable"> <thead> <tr> <th>order id</th> <th>order date</th> <th>status</th> <th>vol number</th> <th>bonus paid</th> <th>reason no bonus</th> </tr> </thead> <tbody> <tr> <td><%=snd.getorderid()%></td> <td><%=snd.getdatecaptured()%></td> <td><%=snd.getorderstatus()%></td> <td>data not available</td> <td>data not available</td> <td>data not available</td> </tr> </tbody> </table> </div> </div> below css, using above div:
#table-wrapper { position:relative; } #table-scroll { height:250px; overflow:auto; margin-top:20px; } #table-wrapper table { width:100%; } #table-wrapper table * { background:white; color:black; } #table-wrapper table thead th .text { position:absolute; top:-20px; z-index:2; height:20px; width:35%; border:1px solid red; }
how doing this? i've made scratch...
what i've done used 2 tables, 1 header, static always, , other table renders cells, i've wrapped using div element fixed height, , enable scroll, using overflow-y: auto;
also make sure use table-layout: fixed; fixed width td elements table doesn't break when string without white space used, inorder break string using word-wrap: break-word;
.wrap { width: 352px; } .wrap table { width: 300px; table-layout: fixed; } table tr td { padding: 5px; border: 1px solid #eee; width: 100px; word-wrap: break-word; } table.head tr td { background: #eee; } .inner_table { height: 100px; overflow-y: auto; } <div class="wrap"> <table class="head"> <tr> <td>head 1</td> <td>head 1</td> <td>head 1</td> </tr> </table> <div class="inner_table"> <table> <tr> <td>body 1</td> <td>body 1</td> <td>body 1</td> </tr> <!-- more tr's --> </table> </div> </div>
Comments
Post a Comment