@charset "utf-8"; body{ margin: 0; padding: 0; } .fixed-table-box table { border-spacing: 0; border-collapse: collapse; box-sizing: border-box; } .fixed-table-box tr, .fixed-table-box td, .fixed-table-box th { box-sizing: border-box; } .fixed-table-box{ position: relative; font-size: 14px; line-height: 1.42858; border: 1px solid #dfe6ec; border-bottom: 0; border-right: 0; overflow: hidden; } .fixed-table-box:before{ display: block; position: absolute; bottom: 0; left: 0; content: " "; width: 100%; height: 1px; background-color: #dfe6ec; } .fixed-table-box:after{ display: block; position: absolute; top: 0; right: 0; content: " "; width: 1px; height: 100%; background-color: #dfe6ec; } /*.fixed-table-box .fixed-table_header,*/ /*.fixed-table-box .fixed-table_body{*/ /* width: auto;*/ /*}*/ .fixed-table-box table{ background-color: #fff; border: 0; } .fixed-table-box th, .fixed-table-box td{ position: relative; text-align: left; padding: 5px 0; border: 1px solid #dfe6ec; } /*.fixed-table-box .table-cell{*/ /* display: block;*/ /* height: 30px;*/ /* line-height: 30px;*/ /* word-break: break-all;*/ /* white-space: nowrap;*/ /* overflow: hidden;*/ /* text-overflow: ellipsis;*/ /* padding-left: 15px;*/ /*}*/ /* 表头 start */ .fixed-table-box>.fixed-table_header-wraper{ overflow: hidden; margin-left: 194px; } .fixed-table-box .fixed-table_header.fixed-header{ position: absolute; top: 0; left: 0; width: 100%; } .fixed-table-box .fixed-table_header tr{ background-color: #eef1f6; } .fixed-table-box .fixed-table_header th{ /*color: #1f2d3d;*/ border-top: 0; border-left: 0; } /* 表头 end */ /*表格内容 start*/ .fixed-table-box .fixed-table_body td{ border-top: 0; border-left: 0; } .fixed-table-box > .fixed-table_body-wraper:nth-child(2) tr:first-child td:first-child{ padding-left: 39px; } .fixed-table-box .fixed-table_body tr.rowHover{ background-color: #eef1f6; } /*表格内容 end*/ /* 行固定表格 start*/ .fixed-table-box.head-fixed .fixed-table_body-wraper{ overflow-y: auto; } .fixed-table-box.head-fixed .fixed-table_header, .fixed-table-box.head-fixed .fixed-table_body{ width: 100%; } /* 行固定表格 end*/ /* 列固定表格 start */ .fixed-table-box.col-fixed{ /* overflow-x: auto; */ border-right: 1px solid #eef1f6; } .fixed-table-box.col-fixed:after{ display: none; } .fixed-table-box.col-fixed .fixed-table_header-wraper{ /*设置它为overflow: hidden的目的是为了在拖动.fixed-table-box.col-fixed .fixed-table_body-wraper 的时候可以同步的拖动.fixed-table-box.col-fixed .fixed-table_header-wraper*/ overflow: hidden; } .fixed-table-box.col-fixed .fixed-table_body-wraper{ overflow-x: auto; } /* 列固定表格 end */ /* 固定列 start */ .fixed-table_fixed{ position: absolute; top: 0; z-index: 5; background-color: #fff; overflow: hidden; } .fixed-table_fixed-left{ left: 0; box-shadow: 1px -1px 8px 1px #d3d4d6; min-height: 100%; } .fixed-table_fixed-left .fixed-table_body-wraper tr:nth-child(1){ background-color: #eef1f6; } .fixed-table_body-wraper tr:nth-child(1){ background-color: #eef1f6; } .fixed-table_fixed-right{ right: 0; /* border-left: 1px solid #dfe6ec\0; */ box-shadow: -2px -1px 8px 1px #d3d4d6; } .fixed-table_fixed .fixed-table_header-wraper, .fixed-table_fixed .fixed-table_body-wraper{ overflow-y: hidden; } .fixed-table_fixed.fixed-table_fixed-right td{ border-right: none; border-left: 1px solid #dfe6ec; } /* 固定列 end */ /* 固定列和固定表头 start */ .fixed-table-box.row-col-fixed>.fixed-table_body-wraper{ overflow: auto; margin-left: 194px; min-height: 280px; } .fixed-table-box_fixed-right-patch{ /*右上角的遮罩,如果少了这块在右边有固定列并且表格内容右侧有滚动条时会出现镂空的效果*/ background-color: #eef1f6; position: absolute; top: 0; right: 0; } /* 固定列和固定表头 end */ /*.fixed-table-box .fixed-table_header th{*/ /* white-space: nowrap;*/ /*}*/ .fixed-table-box>.fixed-table_header-wraper th:nth-child(1){ min-width: 111px; } .fixed-table-box>.fixed-table_header-wraper th:nth-child(2){ min-width: 147px; } .fixed-table-box>.fixed-table_header-wraper th:nth-child(3){ min-width: 150px; } .fixed-table-box>.fixed-table_header-wraper th:nth-child(4){ min-width: 143px; } .fixed-table-box>.fixed-table_header-wraper th:nth-child(5){ min-width: 144px; } .fixed-table-box>.fixed-table_header-wraper th:nth-child(6){ min-width: 145px; } .fixed-table-box>.fixed-table_header-wraper th:nth-child(7){ min-width: 145px; } .fixed-table-box>.fixed-table_header-wraper th:nth-child(8){ min-width: 145px; } .fixed-table-box>.fixed-table_header-wraper th:nth-child(9){ min-width: 145px; } .fixed-table-box>.fixed-table_header-wraper th:nth-child(10){ min-width: 145px; } .fixed-table-box>.fixed-table_header-wraper th:nth-child(11){ min-width: 145px; } .fixed-table-box>.fixed-table_header-wraper th:last-child{ min-width: 320px; } .fixed-table-box>.fixed-table_header-wraper th:nth-last-child(2){ min-width: 186px; } .fixed-table-box.row-col-fixed>.fixed-table_body-wraper td:first-child{ min-width: 258px; max-width: 279px; } .fixed-table-box.row-col-fixed>.fixed-table_body-wraper td:nth-child(2){ min-width: 150px; } .fixed-table-box.row-col-fixed>.fixed-table_body-wraper td:nth-child(3){ min-width: 143px; } .fixed-table-box.row-col-fixed>.fixed-table_body-wraper td:nth-child(4){ min-width: 144px; } .fixed-table-box.row-col-fixed>.fixed-table_body-wraper td:nth-child(5){ min-width: 145px; } .fixed-table-box.row-col-fixed>.fixed-table_body-wraper td:nth-child(6){ min-width: 145px; } .fixed-table-box.row-col-fixed>.fixed-table_body-wraper td:nth-child(7){ min-width: 145px; } .fixed-table-box.row-col-fixed>.fixed-table_body-wraper td:nth-child(8){ min-width: 145px; max-width: 145px; word-break: break-word; } .fixed-table-box.row-col-fixed>.fixed-table_body-wraper td:nth-child(9){ min-width: 145px; } .fixed-table-box.row-col-fixed>.fixed-table_body-wraper td:nth-child(10){ min-width: 145px; } .fixed-table-box.row-col-fixed>.fixed-table_body-wraper td:nth-child(11){ min-width: 145px; } .fixed-table-box.row-col-fixed>.fixed-table_body-wraper td:last-child{ min-width: 320px; } .fixed-table-box.row-col-fixed>.fixed-table_body-wraper td:nth-last-child(2){ min-width: 186px; } /*.fixed-table-box .fixed-table_body td p{*/ /* white-space: nowrap;*/ /*}*/ /*.fixed-table-box .fixed-table_body td{*/ /* white-space: nowrap;*/ /*}*/ @media (max-width: 1780px) { .fixed-table-box.row-col-fixed>.fixed-table_body-wraper{ overflow: auto; } }