Question

我正在开发一个JSP Web项目。我有一个表可以包含超过我的表高度可以处理的数据。所以我想在我的桌子上添加一个垂直滚动。我怎样才能做到这一点？我已经尝试过我在这里看到的其他解决方案，但遗憾的是它对我没有好处。

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

下面是我的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

您是否尝试过设置overflow-y？

编辑：

为父height设置overflow-y和div。

Answer 2

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

如果你的div的内容不合适，

Overflow auto会给你一个滚动条。

如果您希望在滚动时标题保留在原位，则需要提供它 position：fixed;

CSS - 如何在html表

2 个答案: