html - CSS - 如何在 html 表格中添加垂直滚动条

Question

我正在开发一个 JSP 网络元素。我有一个表，其中包含的数据超出了我的表高度可以处理的范围。所以我想在我的 table 上添加一个垂直滚动条。我怎样才能做到这一点？我已经尝试过我在这里看到的其他解决方案，但遗憾的是它对我来说效果不佳。

我想要的是标题应该保持/仍然可见，即使我向下滚动它也是如此。我只希望数据行向下滚动。

下面是我的JSP代码和CSS

JSP:(我只包括了我的表格所关注的部分)

<div id="rightColumn" class="columns">
                <table id="timeTable">
                    <tr>
                        <th>Customer</th>
                        <th>Balance Time</th>
                        <th>Date</th>
                    </tr>
                    <c:forEach items="${timeProp}" var="_timeProp">
                        <tr>
                            <td><c:out value="${_timeProp.tb_customername}"/></td>
                            <td><c:out value="${_timeProp.tb_time}"/></td>
                            <td><c:out value="${_timeProp.tb_date}"/></td>
                        </tr>
                    </c:forEach>
                </table>
            </div>

CSS:(这里也是一样)

#rightColumn {
    width: 75%;
    min-height: 388px;
}

.columns {
    border: 1px solid gray;
    margin: 10px 0px 10px 10px;
    float:left;
    padding: 0px;
    font-size: 20px;
}

#timeTable
{
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    border-collapse: collapse;
    width: 100%;
    text-align: left;
}

#timeTable th
{
    background-color: #4CAF50;
    padding: 5px 5px 5px 5px;
    color: white;
    padding: 8px;
}

#timeTable td, #timeTable th
{
    border: 1px solid black;
}

#timeTable tr:nth-child(even)
{
    background-color: #f2f2f2;
}

#timeTable tr:hover
{
    background-color: #ddd;
}

table tr.active {background: #ccc;}

#timeTable td
{
    padding: 2px 0px 2px 5px;
}

提前致谢。希望你能帮我解决这个问题。

Answer 1

.columns {
    border: 1px solid gray;
    margin: 10px 0px 10px 10px;
    float:left;
    padding: 0px;
    font-size: 20px;
    overflow: auto; /* add this*/
}

Overflow如果您的 div 内容不适合，auto 会给您一个滚动条。

如果你想让标题在你滚动时保持原位，你需要给它 position : 已修复；