如何为TBODY应用垂直滚动条

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.

我在表中有4列和5行数据。我必须为TBODY应用垂直滚动条，TH标题内容不应滚动。

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

我编写了这个场景并且它正常工作，直到我将滚动类应用于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;
}

1 个解决方案

#1

Here is a working example:

这是一个工作示例：

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

You have to add the display:block to the thead > tr and tbody

你必须将display：block添加到thead> tr和tbody

#1