css设置某个div或table(固定表头不动)为固定大小滑动框

急急黄豆

于 2024-01-27 21:11:30 发布

阅读量512

点赞数 6

文章标签： css html 前端

本文链接：https://blog.csdn.net/weixin_64881847/article/details/135863669

版权

本文介绍了如何在JSP页面中利用CSS样式实现div和table的固定大小滑动框功能，包括div内容可滑动和table表头固定的两种情况，详细步骤和代码示例有助于开发者理解和应用。

摘要由CSDN通过智能技术生成

当想要固定某个框在页面中，其中的内容可滑动查看时，可以直接在jsp的head标签中设置css样式实现目的，如图1所示效果。这里给出两种滑动框的设置方式，一种为div框内所有内容可滑动，一种为table表头固定表身可滑动。

一、设置某个div为固定大小滑动框

1、在jsp的head标签中添加如下css样式。

<head>
    <title>宿舍信息管理</title>
    <style>
        /*flag为div的class名*/
        div.flag{
            /*设置内容溢出框时的表现形式，auto为如果内容溢出，则浏览器会显示滚动条以便查看其余的内容。*/
            overflow: auto;
            /*滑动框高度为200px*/
            height: 200px;
        }
    </style>
</head>

2、在body标签中将要设置滑动框的内容放入div标签中，为div添加class名，与style标签中div.后面的class名一致。若该div有多个class名，每个名之间用空格分隔，如不需要别的样式写一个class名即可。

<%--若该div有多个class名，每个名之间用空格分隔--%>
<div class="flag col-md-12 column">
    <%--此处放置框中要放置的内容--%>
</div>

3、最终效果如图2所示，红框中为滑动框，蓝框中为滑动钮

二、设置table为固定大小滑动框，其中固定表头不动，tbody可滑动

1、若想要设置一个表格的表身部分可滑动，表头固定，在jsp的head标签中添加如下css样式。

<head>
    <title>宿舍信息管理</title>
    <style>
        /*为tbody部分设置滑动框*/
        table.a tbody.c {
            display:block;
            height:200px;
            overflow: auto;
        }
        /*设置表格布局*/
        table.a tr.d{
            display:table;
            table-layout:fixed;
        }
    </style>
</head>

2、在body标签中将要设置滑动框的表格命名为a，tbody为真正滑动部分，命名为c，tr命名为d。

<%--style中设置样式的表格名为a，在此处为table的class命名a--%>
<table  frame=hsides class="a table table-hover table-striped">
    <thead>
        <%--为tr的class命名为d--%>
        <tr class="d">
            <td width="100px">层号</td>
            <td width="100px">宿舍号</td>
            <td width="100px">已住人数</td>
            <td>操作</td>
        </tr>
    </thead>
    <%--为tbody的class命名为c--%>
    <tbody class="c">
        <c:forEach items="${dormList}" var="d">
        <%--为tr的class命名为d--%>
        <tr class="d">
            <td width="100px">${d.dFNumber}层</td>
            <td width="100px">${d.dDNumber}寝</td>
            <td width="100px">${d.num }</td>
            <td><a href="${pageContext.request.contextPath}/SelectAllStudentsInDorm?dFNumber=${d.dFNumber}&dDNumber=${d.dDNumber}" class="btn btn-primary">查看人员信息</a>
                <a href="${pageContext.request.contextPath}/SelectDormProperty?dFNumber=${d.dFNumber}&dDNumber=${d.dDNumber}" class="btn btn-primary">查看宿舍标配设施</a>
                <a href="${pageContext.request.contextPath}/insertStudentsInDorm?dNum=${d.num}&dFNumber=${d.dFNumber}&dDNumber=${d.dDNumber}" class="btn btn-primary">插入学生</a>
            </td>
        </tr>
        </c:forEach>
    </tbody>
</table>

3、最终效果如图3所示，红框中为滑动框，蓝框中为滑动钮