如何爲TBODY應用垂直滾動條

Question

我在表中有4列和5行數據。我必須爲TBODY應用垂直滾動條，TH標頭內容不應滾動。

我編寫的場景，它工作正常，直到我將滾動類應用到TBODY。一旦我將滾動樣式類應用於TBODY，它將打破以前的對齊。任意一個可以幫助解決這個問題..謝謝推進

<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; 
} 

Answer 1

這裏是一個工作示例：

http://www.imaputz.com/cssStuff/bigFourVersion.html

您必須添加顯示：塊到THEAD> tr和TBODY