效果图
部分less代码
@pinet-screen-width: 2880;.mixin-sorting(@bg) { &.sorting_1 { background-color: @bg; color: #3d8dc6; a { color: #3d8dc6; } } &.sorting_2 { background-color: @bg; color: #3d8dc6; a { color: #3d8dc6; } } &.sorting_3 { background-color: @bg; color: #3d8dc6; a { color: #3d8dc6; } } }.datatable_res(@width) { .dataTables_wrapper.no-footer { border: 1px solid #eff0f2; border-radius: 7px; background: #ffffff; .dataTables_length { display: none; } .dataTables_filter { display: none; } .dataTables_paginate { padding-top: 20px / @pinet-screen-width * @width; padding-bottom: 20px / @pinet-screen-width * @width; padding-right: 10px / @pinet-screen-width * @width; } } table.dataTable { thead,tbody { tr { th,td { padding-top: 0; padding-bottom: 0; height: 80px / 2880 * @width; line-height: 126px / 2880 * @width; } th { line-height: 126px / 2880 * @width; } } tr.datatable-iframe-container { padding: 0; height: 0; td { padding: 0; height: 0; border: 0; iframe { display: none; width: 100%; height: 450px; background: transparent; } } border: 0; } } } table.dataTable.no-footer { border-bottom: 1px solid #e3e3e3; } table.dataTable.display { thead { .sorting, .sorting_asc, .sorting_desc, .sorting_asc_disabled, .sorting_desc_disabled { background: none; } .sorting_asc, .sorting_desc { color: #3d8dc6; } th { background-color: #ffffff; text-align: center; border-bottom: 1px solid #e3e3e3; } } tbody { tr { td { text-align: center; color: #777d85; a { color: #777d85; } &:first-child { text-align: left; } } } tr.odd, tr.even { td { background-color: #fafafa; .mixin-sorting(#fafafa); } &:hover { td { background-color: #ffffff; .mixin-sorting(#ffffff); } } } tr.ui-selected { td { background-color: #21bbe8; .mixin-sorting(#21bbe8); } &:hover { td { background-color: #5fd3f4; .mixin-sorting(#5fd3f4); } } } } } .datatable-toggle { margin-left: 20px; border-radius: 50%; border-color: transparent; background: #e7eaeb; .glyphicon { color: #ffffff; margin-top: 4px; font-size: 18px; } &:hover { border-color: transparent; } }}@media screen and (min-width: 1440px) { .datatable_res(1440px);}@media screen and (min-width: 1920px) { .datatable_res(1920px);}