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 に答える