表头固定

app/public/js/change_set.js

@@ -305,7 +305,7 @@ $(document).ready(() => {
         const isCheck = $(this).hasClass('table-success') ? true : false;
         const data_bwmx = $(this).attr('data-bwmx').split('$#$');
         const isDeal = $(this).data('gcl') !== undefined ? true : false;
-        let codeHtml = '<tr quantity="0"><td colspan="4"></td><td><input type="checkbox"></td></tr>';
+        let codeHtml = '<tr quantity="0"><td colspan="4" class="colspan_1">&nbsp;</td><td class="colspan_2"><input type="checkbox"></td></tr>';
         if (isDeal) {
             const gcl = gclGatherData[$(this).data('gcl')];
             codeHtml = '';
@@ -321,7 +321,7 @@ $(document).ready(() => {
                     '></td></tr>';
             }
         } else if (!isDeal && isCheck) {
-            codeHtml = '<tr quantity="0"><td colspan="4"></td><td><input type="checkbox" checked></td></tr>';
+            codeHtml = '<tr quantity="0"><td colspan="4" class="colspan_1">&nbsp;</td><td class="colspan_2"><input type="checkbox" checked></td></tr>';
         }
         $('#code-list').attr('data-index', $(this).children('td').eq(0).text());
         $('#code-list').html(codeHtml);

app/view/change/info_modal.ejs

@@ -95,6 +95,93 @@
 
 <!--添加清单-->
 <div class="modal fade " tabindex="-1" role="dialog" aria-hidden="true" id="addlist">
+    <!--<link rel="stylesheet" href="/public/css/bootstrap/bootstrap-table.min.css">-->
+    <!--<script src="/public/js/bootstrap/bootstrap-table.min.js"></script>-->
+    <style>
+        /* 设置滚动条的样式 */
+        .fixed_headers ::-webkit-scrollbar, .fixed_headers2 ::-webkit-scrollbar {
+            width:5px;
+        }
+        .fixed_headers thead tr, .fixed_headers2 thead tr {
+            display: block;
+            position: relative;
+            overflow-y: scroll;
+        }
+        .fixed_headers tbody, .fixed_headers2 tbody {
+            display: block;
+            overflow-y: scroll;
+            height: 369px;
+        }
+        .fixed_headers td:nth-child(1),
+        .fixed_headers th:nth-child(1) {
+            width: 6%;
+            min-width: 40px;
+            text-overflow:ellipsis;
+            white-space:nowrap;
+            overflow:hidden;
+        }
+        .fixed_headers td:nth-child(2),
+        .fixed_headers th:nth-child(2) {
+            width: 20%;
+            min-width: 133px;
+        }
+        .fixed_headers td:nth-child(3),
+        .fixed_headers th:nth-child(3) {
+            width: 37%;
+            min-width: 247px;
+        }
+        .fixed_headers td:nth-child(4),
+        .fixed_headers th:nth-child(4) {
+            width: 10%;
+            min-width: 66px;
+        }
+        .fixed_headers td:nth-child(5),
+        .fixed_headers th:nth-child(5) {
+            width: 13%;
+            min-width: 86px;
+        }
+        .fixed_headers td:nth-child(6),
+        .fixed_headers th:nth-child(6) {
+            width: 13%;
+            min-width: 87px;
+        }
+
+        .fixed_headers2 td:nth-child(1),
+        .fixed_headers2 th:nth-child(1) {
+            width: 18%;
+            min-width: 100px;
+            text-overflow:ellipsis;
+            white-space:nowrap;
+            overflow:hidden;
+        }
+        .fixed_headers2 td:nth-child(2),
+        .fixed_headers2 th:nth-child(2) {
+            width: 23%;
+            min-width: 113px;
+        }
+        .fixed_headers2 td:nth-child(3),
+        .fixed_headers2 th:nth-child(3) {
+            width: 25%;
+            min-width: 124px;
+        }
+        .fixed_headers2 td:nth-child(4),
+        .fixed_headers2 th:nth-child(4) {
+            width: 16%;
+            min-width: 82px;
+        }
+        .fixed_headers2 td:nth-child(5),
+        .fixed_headers2 th:nth-child(5) {
+            width: 8%;
+            min-width: 41px;
+        }
+        .fixed_headers2 .colspan_1 {
+            width: 95%!important;
+        }
+        .fixed_headers2 .colspan_2 {
+            width: 5%!important;
+            min-width: 41px!important;
+        }
+    </style>
     <div class="modal-dialog modal-xl">
         <div class="modal-content">
             <div class="modal-header">
@@ -106,19 +193,19 @@
             <div class="modal-body">
                 <div class="row">
                     <div class="col-7">
-                        <div style="height:400px;overflow-y:auto">
-                            <table class="table table-striped table-bordered table-hover table-sm">
-                                <thead><tr><th width="40">序号</th><th>清单编号</th><th>名称</th><th width="50">单位</th><th width="60">单价</th><th width="60">数量</th></tr></thead>
+                        <div style="height:400px;overflow-y:hidden">
+                            <table class="table table-striped table-bordered table-hover table-sm fixed_headers">
+                                <thead><tr><th>序号</th><th>清单编号</th><th>名称</th><th>单位</th><th>单价</th><th>数量</th></tr></thead>
                                 <tbody id="table-list-select">
                                 </tbody>
                             </table>
                         </div>
                     </div>
                     <div class="col-5">
-                        <div style="height:400px;overflow-y:auto">
-                            <table class="table table-striped table-sm table-bordered table-hover">
+                        <div style="height:400px;overflow-y:hidden">
+                            <table class="table table-striped table-bordered table-hover table-sm fixed_headers2">
                                 <thead>
-                                <tr><th width="100">项目节编号</th><th>名称</th><th>部位明细</th><th width="70">部位数量</th><th width="40">选择</th></tr>
+                                <tr><th>项目节编号</th><th>名称</th><th>部位明细</th><th>部位数量</th><th>选择</th></tr>
                                 </thead>
                                 <tbody id="code-list" data-index="">
                                 </tbody>