...

View Full Version : Hot to have Static Table Header<THEAD> with Dynamic Scrollable Table Contents ..?



murali1983
12-13-2006, 04:02 PM
hi,

how can i get a static header with scrollable table, the table contents will be populated based on the selected value.
the result might contain any number of table rows, my requirement is even after scrolling the table rows the table header should remain static.

is ther any simple way to acheive this..?, coz al my coding is done without having static header.

thnx
Murali.

jalarie
12-13-2006, 08:38 PM
<style type="text/css">
/*<![CDATA[*/
.ScrollTable-container {
display: table-cell;
}
.ScrollTable thead tr {
position: relative;
}
.ScrollTable tbody {
overflow: auto;
}
.ScrollTable tbody tr {
height: auto;
}
.ScrollTable tbody tr td:last-child {
padding-right: 20px;
}
/*]]>*/
</style>
<!--[if IE]>
<style type="text/css">
/*<![CDATA[*/
.ScrollTable {
overflow-y: auto;
width: 1px;
}
/*]]>*/
</style>
<![endif]-->



<div class="ScrollTable-container">
<div class="ScrollTable" style="height: 200px;">
<table border="1" cellspacing="2" cellpadding="2">
<thead>
<tr>
<th colspan="2">People in My Group</th>
</tr>
<tr>
<th>Name</th>
<th>Relationship</th>
</tr>
</thead>
<tbody style="height: 135px;">
<tr>
<td align="left">me</td>
<td align="left">of course!</td>
</tr>
<tr>
<td align="left">George</td>
<td align="left">imaginary friend</td>
</tr>
<tr>
<td align="left">Daryl</td>
<td align="left">my brother</td>
</tr>
<tr>
<td align="left">Daryl</td>
<td align="left">my other brother</td>
</tr>
<tr><td>Co 1</td><td>a co-worker</td></tr>
<tr><td>Co 2</td><td>a co-worker</td></tr>
<tr><td>Co 3</td><td>a co-worker</td></tr>
<tr><td>Co 4</td><td>a co-worker</td></tr>
<tr><td>Co 5</td><td>a co-worker</td></tr>
<tr><td>Co 6</td><td>a co-worker</td></tr>
<tr><td>Co 7</td><td>a co-worker</td></tr>
<tr><td>Co 8</td><td>a co-worker</td></tr>
<tr><td>Co 9</td><td>a co-worker</td></tr>
</tbody>
</table>
</div>
</div>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum