I have 4 column and 5 row data in table. I have to apply vertical scrollbar for TBODY, the TH header content should not scroll.
I coded the scenario and it's working fine until I apply the scroll class to TBODY. Once I apply the scroll style class to TBODY it breaks the previous alignment. Can any one help to fix this issue.. advances Thanks
<table class="banker-list"> <colgroup><col width="40%"><col width="23%"><col width="24%"><col width="13%"></colgroup> <thead> <tr> <th><p class="fieldLabel">Banker<span class="requiredFieldIndicator">*</span></p></th> <th><p class="fieldLabel">High Balance (<span class="seg-hb">30</span>)</p></th> <th><p class="fieldLabel">High Potential (<span class="seg-hp">60</span>)</p></th> <th><p class="fieldLabel">Core (<span class="seg-core">10</span>)</p></th> </tr> </thead> <tbody class="bankerScroll"> <tr> <td><input class="banker-name" name="send-to-banker" id="banker_0" type="checkbox"> <label for="banker_0">JOHN</label></td> <td><input name="banker_0_segment" disabled="disabled" type="checkbox"></td> <td><input name="banker_0_segment" disabled="disabled" type="checkbox"></td> <td><input name="banker_0_segment" disabled="disabled" type="checkbox"></td> </tr> <tr class="oddRow"> <td><input class="banker-name" name="send-to-banker" id="banker_1" type="checkbox"> <label for="banker_1">JOHN</label></td> <td><input name="banker_1_segment" disabled="disabled" type="checkbox"></td> <td><input name="banker_1_segment" disabled="disabled" type="checkbox"></td> <td><input name="banker_1_segment" disabled="disabled" type="checkbox"></td> </tr> <tr> <td><input class="banker-name" name="send-to-banker" id="banker_2" type="checkbox"> <label for="banker_2">JOHN</label></td> <td><input name="banker_2_segment" disabled="disabled" type="checkbox"></td> <td><input name="banker_2_segment" disabled="disabled" type="checkbox"></td> <td><input name="banker_2_segment" disabled="disabled" type="checkbox"></td> </tr> <tr class="oddRow"> <td><input class="banker-name" name="send-to-banker" id="banker_3" type="checkbox"> <label for="banker_3">JOHN</label></td> <td><input name="banker_3_segment" disabled="disabled" type="checkbox"></td> <td><input name="banker_3_segment" disabled="disabled" type="checkbox"></td> <td><input name="banker_3_segment" disabled="disabled" type="checkbox"></td> </tr> <tr> <td><input class="banker-name" name="send-to-banker" id="banker_4" type="checkbox"> <label for="banker_4">JOHN</label></td> <td><input name="banker_4_segment" disabled="disabled" type="checkbox"></td> <td><input name="banker_4_segment" disabled="disabled" type="checkbox"></td> <td><input name="banker_4_segment" disabled="disabled" type="checkbox"></td> </tr> </tbody> </table> TABLE { border-collapse: collapse; width: 100%; } P, TABLE { font-family: Verdana; text-align: left; } .dataRow { margin-bottom: 5px; margin-top: 5px; } .fieldLabel { color: #000000; font-size: 85%; font-weight: bold; } .bankerScroll { display:block;overflow:auto;height:100px;white-space:nowrap; } 
