jQuery表格顶部与左右两侧固定滚动

新建html文档。

书写hmtl代码。

书写css代码。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; }.fixed-table-box>.fixed-table_header-wraper { overflow: hidden; }.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; }.fixed-table-box .fixed-table_body td { border-top: 0; border-left: 0; }.fixed-table-box .fixed-table_body tr.rowHover { background-color: #eef1f6; }.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%; }.fixed-table-box.col-fixed { 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 { overflow-x: auto; }.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; }.fixed-table_fixed-right { right: 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; }.fixed-table-box.row-col-fixed>.fixed-table_body-wraper { overflow: auto; }.fixed-table-box_fixed-right-patch { background-color: #eef1f6; position: absolute; top: 0; right: 0; }.fixed-table-box { width: 800px; margin: 50px auto; }.fixed-table-box>.fixed-table_body-wraper { max-height: 260px; }.fixed-table_fixed>.fixed-table_body-wraper { max-height: 240px; }.w-150 { width: 150px; }.w-120 { width: 120px; }.w-300 { width: 300px; }.w-100 { width: 100px; }.btns { text-align: center; }.btns button { padding: 10px 20px; }

书写并添加js代码。

书写fixed-table.js代码。

代码整体结构。

查看效果。