html中table固定头部表格tbody可上下左右滑动
html中table固定头部表格tbody可上下左右滑动
这篇文章主要介绍了html中table固定头部表格tbody可上下左右滑动,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
当表格头部固定时,需要分为两个表格来做:一部分是thead,一部分是tbody,具体实现方式如下:
html代码:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 | < div class = "table_box_big" > < div class = "table_box" > < table > < thead > < tr > < th >< div >标题一</ div ></ th > < th >< div >标题二</ div ></ th > < th >< div >标题三</ div ></ th > < th >< div >标题标题标题标题标题标题标题标题标题四</ div ></ th > < th >< div >标题标题标题标题标题标题标题标题标题五</ div ></ th > < th >< div >标题标题标题标题标题标题标题标题标题六</ div ></ th > </ tr > </ thead > </ table > < div class = "table_tbody_box" > < table > < tr > < td >信息一</ td > < td >信息二</ td > < td >信息三</ td > < td >信息信息信息信息信息信息信息信息信息四</ td > < td >信息信息信息信息信息信息信息信息信息五</ td > < td >信息信息信息信息信息信息信息信息信息六</ td > </ tr > < tr > < td >信息一</ td > < td >信息二</ td > < td >信息三</ td > < td >信息信息信息信息信息信息信息信息信息四</ td > < td >信息信息信息信息信息信息信息信息信息五</ td > < td >信息信息信息信息信息信息信息信息信息六</ td > </ tr > < tr > < td >信息一</ td > < td >信息二</ td > < td >信息三</ td > < td >信息信息信息信息信息信息信息信息信息四</ td > < td >信息信息信息信息信息信息信息信息信息五</ td > < td >信息信息信息信息信息信息信息信息信息六</ td > </ tr > < tr > < td >信息一</ td > < td >信息二</ td > < td >信息三</ td > < td >信息信息信息信息信息信息信息信息信息四</ td > < td >信息信息信息信息信息信息信息信息信息五</ td > < td >信息信息信息信息信息信息信息信息信息六</ td > </ tr > < tr > < td >信息一</ td > < td >信息二</ td > < td >信息三</ td > < td >信息信息信息信息信息信息信息信息信息四</ td > < td >信息信息信息信息信息信息信息信息信息五</ td > < td >信息信息信息信息信息信息信息信息信息六</ td > </ tr > < tr > < td >信息一</ td > < td >信息二</ td > < td >信息三</ td > < td >信息信息信息信息信息信息信息信息信息四</ td > < td >信息信息信息信息信息信息信息信息信息五</ td > < td >信息信息信息信息信息信息信息信息信息六</ td > </ tr > < tr > < td >信息一</ td > < td >信息二</ td > < td >信息三</ td > < td >信息信息信息信息信息信息信息信息信息四</ td > < td >信息信息信息信息信息信息信息信息信息五</ td > < td >信息信息信息信息信息信息信息信息信息六</ td > </ tr > < tr > < td >信息一</ td > < td >信息二</ td > < td >信息三</ td > < td >信息信息信息信息信息信息信息信息信息四</ td > < td >信息信息信息信息信息信息信息信息信息五</ td > < td >信息信息信息信息信息信息信息信息信息六</ td > </ tr > </ table > </ div > </ div > |
css样式:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 | .table_box_big { overflow-x: scroll ; overflow-y: hidden ; position : relative ; height : 350px ; } .table_box { overflow : hidden ; position : absolute ; } .table_tbody_box { height : 300px ; overflow : scroll ; } table { border : 1px solid #eeeeee ; } table thead tr th { width : 80px ; height : 50px ; border-right : 1px solid #eeeeee ; text-align : center ; word-break: keep- all ; padding : 2px 10px ; background : skyblue; } table tbody tr td { width : 80px ; height : 50px ; border-right : 1px solid #eeeeee ; text-align : center ; border-bottom : 1px solid #eeeeee ; word-break: keep- all ; padding : 2px 10px ; } |
实现效果如下:
到此这篇关于html中table固定头部表格tbody可上下左右滑动的文章就介绍到这了