table表格设置固定表头、数据行出现竖向滚动条

最新推荐文章于 2024-05-09 10:37:05 发布
weixin_41696089
最新推荐文章于 2024-05-09 10:37:05 发布
阅读量961
点赞数
分类专栏：前台 html css 文章标签： html css js
本文链接：https://blog.csdn.net/weixin_41696089/article/details/110689038
版权
前台同时被 3 个专栏收录
10 篇文章 0 订阅
订阅专栏
html
3 篇文章 0 订阅
订阅专栏
css
3 篇文章 0 订阅
订阅专栏
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>物资申请单查看</title>
    <!-- 分离模式框架必需start -->
    <script type="text/javascript" charset="UTF-8" th:src="@{/js/jquery.js}"></script>
    <script type="text/javascript" charset="UTF-8" th:src="@{/js/language/cn.js}"></script>
    <script type="text/javascript" charset="UTF-8" th:src="@{/js/framework.js}"></script>
    <link rel="stylesheet" type="text/css" th:href="@{/css/import_basic.css}"/>
    <link rel="stylesheet" type="text/css" id="skin" prePath="@{/}" splitMode="true"
          th:href="@{/skins/blue/style.css}"/>
    <link rel="stylesheet" type="text/css" id="customSkin" th:href="@{/system/layout/skin/style.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/skin/style.css}"/>
    <!-- 分离模式框架必需end -->
    <!--ajax提交start-->
    <script type="text/javascript" th:src="@{/js/jquery.form.js}"></script>
    <!--ajax提交end-->
    <!-- 日期选择框start -->
    <script type="text/javascript" th:src="@{/js/form/datePicker/WdatePicker.js}"></script>
    <!-- 日期选择框end -->
    <!--引入弹窗组件start-->
    <script type="text/javascript" th:src="@{/js/popup/drag.js}"></script>
    <script type="text/javascript" th:src="@{/js/popup/dialog.js}"></script>
    <!--引入弹窗组件end-->
    <!-- 引入表单验证组件start -->
    <script type="text/javascript" charset="UTF-8" th:src="@{/js/form/validationRule.js}"></script>
    <script type="text/javascript" charset="UTF-8" th:src="@{/js/form/validation.js}"></script>
    <!-- 引入表单验证组件end -->
    <!--自动提示框start-->
    <script type='text/javascript' th:src="@{/js/form/suggestion.js}"></script>
    <!--自动提示框end-->
    <!-- 树组件start -->
    <script type="text/javascript" th:src="@{/js/tree/ztree/ztree.js}"></script>
    <link type="text/css" rel="stylesheet" th:href="@{/js/tree/ztree/ztree.css}"></link>
    <!-- 树组件end -->
    <!-- 树形下拉框start -->
    <script type="text/javascript" th:src="@{/js/form/selectTree.js}"></script>
    <!-- 树形下拉框end -->
    <script type="text/javascript" th:src="@{/js/ajaxfileupload.js}"></script>
    <script type="text/javascript" th:src="@{/js/IMGUP/kissy-min.js}"></script>
    <script type="text/javascript" th:src="@{/js/IMGUP/index-min.js}"></script>
    <link th:href="@{/files_tp6/IMGUP.css}" rel="stylesheet"/>

    <style type="text/css">
        .table-head{padding-right:9px;}
        .table-body{width:100%; height:100%;overflow-y:scroll;}
        .table-head table,.table-body table{width:100%;}
        .table-body table tr:nth-child(2n+1){background-color:#f2f2f2;}
        .table-body table tr:hover {
            background-color:rgb(240, 249, 228);
            transition: .2s;
        }
    </style>

    <script>

        var fixObjHeight =10;

        function customHeightSet(contentHeight) {
            $("#scrollContent").height(contentHeight - fixObjHeight);
            $(".table-body").height(contentHeight - fixObjHeight-165);
            var browser= myBrowser();//获取浏览器
            if(browser=="IE"||browser=="Edge"||browser==undefined){
                var div = document.getElementById("table-head");
                div.style.setProperty('padding-right','15px');
            }else{
                var div = document.getElementById("table-head");
                div.style.setProperty('padding-right','7.66px');
            }
        }

        function myBrowser() {
            var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串
            var isOpera = userAgent.indexOf("Opera") > -1; //判断是否Opera浏览器
            var isIE = userAgent.indexOf("compatible") > -1&& userAgent.indexOf("MSIE") > -1 && !isOpera; //判断是否IE浏览器
            var isEdge = userAgent.indexOf("Edge") > -1; //判断是否IE的Edge浏览器
            var isFF = userAgent.indexOf("Firefox") > -1; //判断是否Firefox浏览器
            var isSafari = userAgent.indexOf("Safari") > -1&& userAgent.indexOf("Chrome") == -1; //判断是否Safari浏览器
            var isChrome = userAgent.indexOf("Chrome") > -1&& userAgent.indexOf("Safari") > -1; //判断Chrome浏览器
            if (isIE) {
                var reIE = new RegExp("MSIE (\\d+\\.\\d+);");
                reIE.test(userAgent);
                var fIEVersion = parseFloat(RegExp["$1"]);
                if (fIEVersion == 7) {
                    return "IE7";
                } else if (fIEVersion == 8) {
                    return "IE8";
                } else if (fIEVersion == 9) {
                    return "IE9";
                } else if (fIEVersion == 10) {
                    return "IE10";
                } else if (fIEVersion == 11) {
                    return "IE11";
                } else {
                    return "0";
                }//IE版本过低
                return "IE";
            }
            if (isOpera) {
                return "Opera";
            }
            if (isEdge) {
                return "Edge";
            }
            if (isFF) {
                return "FF";
            }
            if (isSafari) {
                return "Safari";
            }
            if (isChrome) {
                return "Chrome";
            }
        }


        //取消(返回申请列表并刷新)
        function Cancel() {
            window.history.back(-1);
        }
    </script>
</head>
<body>
<div id="scrollContent"  class="border_gray" >
    <form method="post" id="myForm" enctype="multipart/form-data" target="frmright">
        <div class="wrapbox" style="height: 100%;" >
            <div class="table-head" id="table-head" style="height:105px; ">
                <div align="center" style="width:100%;height:25px;font-size: 20px;margin-top: 2px;">物资领用明细</div>
                <table class="tableStyle" id="main">
                    <tr align="center">
                        <td style="background: #f2f2f2" align="center" nowrap width="100px">物资领用单号</td>
                        <td style="background: #f2f2f2" align="center" nowrap width="100px"><input type="text" style="border-style:none;background:none;width:90%"  name="lydbh" id="lydbh" th:value="${entity.lydbh}"  readonly/></td>
                        <td style="background: #f2f2f2" align="center" nowrap width="100px">申请单位</td>
                        <td style="background: #f2f2f2" align="center" nowrap width="100px">[[${entity.unitname}]]</td>
                        <td style="background: #f2f2f2" align="center" nowrap width="100px">维修单编号</td>
                        <td style="background: #f2f2f2" align="center" nowrap width="100px">[[${entity.wxdbh}]]</td>
                        <td style="background: #f2f2f2" align="center" nowrap width="100px">申请人</td>
                        <td style="background: #f2f2f2" align="center" nowrap width="100px">[[${entity.applicant}]]</td>
                        <td style="background: #f2f2f2" align="center" nowrap width="100px">申请日期</td>
                        <td style="background: #f2f2f2" align="center" nowrap width="100px">[[${entity.apply_date}]]</td>
                    </tr>
                    <tr align="center">
                        <td style="background: #f2f2f2" align="center" nowrap width="100px">说明</td>
                        <td style="background: #f2f2f2" align="left" colspan="9" >[[${entity.explanin}]]</td>
                    </tr>
                    <tr align="center">
                        <td style="background: #f2f2f2" align="center" nowrap width="100px">物资名称</td>
                        <td style="background: #f2f2f2" align="center" nowrap width="100px">型号</td>
                        <td style="background: #f2f2f2" align="center" nowrap width="100px">规格</td>
                        <td style="background: #f2f2f2" align="center" nowrap width="100px">品牌</td>
                        <td style="background: #f2f2f2" align="center" nowrap width="100px">单位</td>
                        <td style="background: #f2f2f2" align="center" nowrap width="100px">单价</td>
                        <td style="background: #f2f2f2" align="center" nowrap width="100px">数量</td>
                        <td style="background: #f2f2f2" align="center" nowrap width="100px">金额</td>
                        <td style="background: #f2f2f2" align="center" nowrap width="100px">备注</td>
                        <td style="background: #f2f2f2" align="center" nowrap width="100px"></td>
                    </tr>
                </table>
            </div>
            <div class="table-body">
                 <table class="tableStyle" id="detailed" style="margin-bottom: 3px;">
                     <tbody id="rows">
                         <tr align="center" th:each="obj:${list}">
                             <td class="ali02" style="width: 100px">[[${obj.assets_name}]]</td>
                             <td class="ali02" style="width: 100px">[[${obj.model}]]</td>
                             <td class="ali02" style="width: 100px">[[${obj.specs}]]</td>
                             <td class="ali02" style="width: 100px">[[${obj.brand}]]</td>
                             <td class="ali02" style="width: 100px">[[${obj.unit}]]</td>
                             <td class="ali02" style="width: 100px">[[${obj.price}]]</td>
                             <td class="ali02" style="width: 100px">[[${obj.apply_number}]]</td>
                             <td class="ali02" style="width: 100px">[[${obj.amounts}]]</td>
                             <td class="ali02" style="width: 100px">[[${obj.remark}]]</td>
                             <td class="ali02" style="width: 100px"></td>
                         </tr>
                     </tbody>
                 </table>
            </div>
                <!--<div align="right" >-->
                    <!--<button type="button" style="margin-top: 5px;margin-right: 25px;" onclick="addAll()"><span class="icon_save">保存</span></button>-->
                    <!--<button type="button" style="margin-top: 5px;margin-right: 25px;" onclick="addAll()"><span class="icon_ok">提交</span></button>-->
                    <!--<button type="button" style="margin-top: 5px;margin-right: 25px;" onclick="Cancel()"><span class="icon_clear">取消</span></button>-->
                <!--</div>-->
        </div>
    </form>
</div>
</body>
</html>
weixin_41696089
关注
0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
table表格设置固定表头、数据行出现竖向滚动条

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html xmlns:th="http://www.thymeleaf.org"><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> &l
复制链接

扫一扫