0

我有 4 列的表。我只需要为 tbody 右侧应用滚动条。我将滚动条类放在 tbody 中。在我应用 tbody class=bankerScroll 之前，对齐很好 4 列和并行数据显示，但我在 tboday 应用 bankerScroll 类，对齐变得一团糟.. 谁能帮我这个...

<table>
                        <colgroup><col width="40%"><col width="23%"><col width="24%"><col width="13%"></colgroup>
                        <thead>
                            <tr>
                                <th><p class="fieldLabel">Name</p></th>
                                <th><p class="fieldLabel">Value1</th>
                                <th><p class="fieldLabel">Value2</th>
                                <th><p class="fieldLabel">Value3</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 </td>
                                <td><input disabled="disabled" name="banker_1" type="checkbox"></td>
                                <td><input disabled="disabled" name="banker_2" type="checkbox"></td>
                                <td><input disabled="disabled" name="banker_3" type="checkbox"></td>
                            </tr>
                            <tr>
                                <td><input class="banker-name" name="send-to-banker" id="banker_4" type="checkbox"> <label for="banker_0">JOHN </td>
                                <td><input disabled="disabled" name="banker_5" type="checkbox"></td>
                                <td><input disabled="disabled" name="banker_6" type="checkbox"></td>
                                <td><input disabled="disabled" name="banker_7" type="checkbox"></td>
                            </tr>
                            <tr>
                                <td><input class="banker-name" name="send-to-banker" id="banker_8" type="checkbox"> <label for="banker_0">JOHN </td>
                                <td><input disabled="disabled" name="banker_9" type="checkbox"></td>
                                <td><input disabled="disabled" name="banker_10" type="checkbox"></td>
                                <td><input disabled="disabled" name="banker_11" type="checkbox"></td>
                            </tr>

                        </tbody>
                        </table>

CSS




 .dataRow {
    margin-bottom: 5px;
    margin-top: 5px;
}
   border-collapse: collapse;
    width: 100%;
}
.fieldLabel {
    color: #000000;
    font-size: 85%;
    font-weight: bold;
}
P, TABLE {
    font-family: Verdana;
    margin: 0;
    text-align: left;
}
.requiredFieldIndicator {
    color: #0088FF;
    font-size: x-small;
    font-weight: bold;
}
TD {
    padding: 2px;
    vertical-align: top;
}

.bankerScroll
{
    style="overflow:auto;height:100px;display:block;border:1px solid red;
}
4

1 回答 1

1

尝试这个

.scrollClass{
    height:100px;
    overflow-y: scroll;
    overflow-x: auto;
    display:block;
    border:2px solid blue;
    width:100%;
}

希望这可以帮助！！

于 2012-11-07T10:09:28.870 回答