将垂直滚动条从移至<div>

时间:2019-04-29 08:15:34

标签: html css

我想将垂直滚动条移至DIV“包装器”。下面的代码在表主体的末尾具有垂直滚动。我需要在包装DIV中显示它 另外,我将标头设置为固定。

这可能吗?

 <div class="wrapper">
<table width="100%" class="scrollTable">
<thead class="fixedHeader">
    <tr>
        <th><a href="#">Header 1</a></th>
        <th><a href="#">Header 2</a></th>
        <th><a href="#">Header 3</a></th>
    </tr>
</thead>
<tbody class="scrollContent">
    <tr>
        <td>Cell Content 1</td>
        <td>Cell Content 2</td>
        <td>Cell Content 3</td>
    </tr>
    <tr>
        <td>And Repeat 1</td>
        <td>And Repeat 2</td>
        <td>And Repeat 3</td>
    </tr>
</tbody>
</table>

CSS代码

table {
width: 360px;
overflow-x: scroll;
}

tbody {
width: 100%;
height: 300px;
overflow-y: auto;
display: block;
}

table.scrollTable tbody,
table.scrollTable thead { display: block; }

.wrapper {
overflow-x: auto;
width: 200px;
border: 1px solid #000;
}

0 个答案:

没有答案