/* * { margin:0; padding:0; box-sizing:border-box; } @-moz-document url-prefix() { *{scrollbar-width:thin; } }::-webkit-scrollbar { width:0; height:5px; } ::-webkit-scrollbar-corner,::-webkit-scrollbar-track { background-color:transparent; } ::-webkit-scrollbar-thumb { background:#ebedef; border-radius:10px; } ::-webkit-scrollbar-corner,::-webkit-scrollbar-track { background-color:transparent; } ::-webkit-scrollbar-track-piece { background:#f7f7f7; } .tableScroll { width:590px; padding:20px; } .tableScroll table { border-collapse:collapse; width:100%; } .tableScroll table th { white-space:nowrap; } .tableScroll table th,.tableScroll table td { border:1px solid #ddd; height:26px; line-height:26px; } .tableScroll .tableHeader { position:sticky; top:0; } .tableScroll .tableHeader th { font-weight:normal; font-size:12px; text-align:left; padding-left:10px; } .tableScroll .scrollBox { overflow-y:auto; height:135px; border-bottom:1px solid #ddd; border-collapse:collapse; } .tableScroll .tableBody { margin-top:-1px; } .tableScroll .scrollBox tr td:nth-child(2) div { width:95%; } .tableScroll .scrollBox tr td:nth-child(3) div { width:95%; } .tableScroll .tableBody .textEllipsis { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; line-height:1; } .tableScroll .tableBody td { color:#333; font-weight:normal; padding-left:10px; font-size:12px; text-align:left; } .tableScroll .tableBody tr:last-child { border-bottom:0; } .tableScroll tbody { border-bottom:none; } */ * { margin:0; padding:0; box-sizing:border-box; font-size:13px; color:#333; } @-moz-document url-prefix() { *{scrollbar-width:thin; } }::-webkit-scrollbar { width:5px; height:5px; } ::-webkit-scrollbar-corner,::-webkit-scrollbar-track { background-color:transparent; } ::-webkit-scrollbar-thumb { background:#ebedef; border-radius:10px; } ::-webkit-scrollbar-corner,::-webkit-scrollbar-track { background-color:transparent; } ::-webkit-scrollbar-track-piece { background:#f7f7f7; } .tableScroll { width:620px; margin:50px auto; position:relative; overflow:hidden; } .tableScroll .thead,.tableScroll .tr { display:flex; align-items:center; } .tableScroll { border:1px solid #f1f1f1; } .tableScroll .thead>div,.tableScroll .tbody .tr>div { height:28px; line-height:28px; white-space:nowrap; flex-shrink:0; text-align:center; } .tableScroll .thead>div { font-weight:bold; border-bottom:1px solid #f1f1f1; } .tableScroll .thead>div,.tableScroll .tbody .tr>div { border-right:1px solid #f1f1f1; } .tableScroll .tbody .tr>div { border-top:1px solid #f1f1f1; } .tableScroll .tbody { margin-top:-1px; } .tableScroll .tbody .tr .textEllipsis { width:100%; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; } .tableScroll .tbody { height:140px; overflow-x:hidden; overflow-y:auto; } #tableScroll_1 { opacity:0; }
更新时间:2024-07-31 14:51:09
html+css+jquery实现表头固定不动,表格内容垂直自动轮播