h5网页移动表格，表头和body可以左右滑动，上下滑动表头固定
css代码
.tableBox {
height: 100%;
/* width: 100%; */
overflow-y: hidden;
overflow-x: scroll;
-webkit-overflow-scrolling: touch;
position: relative;
background: #fff;
}
.tableHead {
width: 100%;
background-color: #eef7ff;
border-top: 1px solid #e8e8e8;
/* border-bottom: 1px solid #e8e8e8; */
color: #777;
table-layout: fixed;
position: absolute;
top:0;
}
.tableHead th {
padding: 0;
border-collapse: collapse;
background-color: #eef7ff;
border-bottom: 0.5px solid #ececec;
/* height: 40px; */
border-right: 0.5px solid #ececec;
}
.tableHead th p, .tableBody tbody tr td p{
margin: 0 !important;
}
.tableHead th:last-child() {
border-bottom: none;
}
.tableBodyBox {
table-layout: fixed;
-webkit-overflow-scrolling: touch;
overflow-x: hidden;
overflow-y: scroll;
/* height: 100%; */
box-sizing: border-box;
/* padding-top: 50px; */
}
.tableBody{
table-layout: fixed;
width: 100%;
background-color: white;
text-align: center;
}
.tableBody tbody tr td {
height: 1px;
padding: 0;
border-collapse: collapse;
/* padding: 10px; */
border-bottom: 0.5px solid #ececec;
border-right: 0.5px solid #ececec;
}
.tableBody tr:nth-child(even) {
background-color: #F9FAFE;
}
html部分
setTimeout(() => {
if(document.getElementById('pubhead') != null) {
let he = document.getElementById('pubhead').offsetHeight;
let wid = document.getElementById('pubhead1').scrollWidth;
document.getElementById("bodyBox").style.width=wid+'px';
document.getElementById("bodyBox").style.height=(300-he)+'px';
document.getElementById("bodyBox").style.marginTop=he+'px';
document.getElementById("bodyBox").style.overflowY='scroll';
document.getElementById("bodyBox").style.overflowX='hidden';
}
}, 500)
<div style={{height: '300px'}}> <div className={styles.tableBox}> <table className={styles.tableHead} id='pubhead' style={{width: allWidth + 'px'}}> { widthlist.map(it => { let defauleWidth = window.innerWidth / widthlist.length; return <colgroup> <col width={thWidth(it.width, defauleWidth)} /> </colgroup> }) } <thead id='pubhead1'> { cospanlist.map((item, ind) => { return <tr > { item.list.map((it, childid) => { // let defauleWidth = window.innerWidth / item.list.length; // return <th onClick={it.sortflag ? sortClick.bind(this, it.isShowSort, ind, childid) : ''} width={thWidth(it.width, defauleWidth)} colSpan={it.colspan} rowSpan={it.rowspan}> return <th onClick={it.sortflag ? sortClick.bind(this, it.isShowSort, ind, childid) : ''} colSpan={it.colspan} rowSpan={it.rowspan}> <div style={{display: 'inline-block', width: '100%'}} dangerouslySetInnerHTML={{__html:it.value}}></div> { it.sortflag ? <img src={it.isShowSort ? require('../../assets/sxzy_icon_sx.png') : require('../../assets/sxzy_icon_xj.png')} style={{height:12, marginLeft: '10px'}} /> : null } </th> }) } </tr> }) } </thead> </table> <div className={styles.tableBodyBox} id='bodyBox'> <table className={styles.tableBody} style={{margin: 0, padding: 0}}> { widthlist.map(it => { let defauleWidth = window.innerWidth / widthlist.length; return <colgroup> <col width={thWidth(it.width, defauleWidth)} /> </colgroup> }) } <tbody> { showDatas.map(item => { return <tr> { item.list.map(it => { return <td colSpan={it.colspan} rowSpan={it.rowspan}> <div style={{height: '100%', wordWrap:"break-word", }} dangerouslySetInnerHTML={{__html:it.value}}></div> </td> }) } </tr> }) } </tbody> </table> </div> </div> </div>
js数据
let moveData = [{ showmodel: "moveTable", modelcode: "moveTable", widthlist: [ { width: '60', }, { width: '80', }, { width: '100', }, { width: '100', }, { width: '50', }, { width: '50', } ], cospanlist:[ { list: [ { value: '第一行1列', rowspan: '1', colspan: '3', sortflag: false, // all 是升序和降序都存在 jx代表降序 sx代表升序 }, { value: "<p style='padding: 6px;'>jjjj</p>", rowspan: '1', colspan: '3', sortflag: false, // 是否显示升序降序 }, ], }, { list: [ { value: '二行1', rowspan: '1', colspan: '2', sortflag: false, }, { value: '二行2', rowspan: '1', colspan: '2', sortflag: false, }, { value: '二行2', rowspan: '1', colspan: '2', sortflag: false, } ], }, { list: [ { value: '表头1', sortflag: true, // 表示哪一行和哪一列显示升序和降序 isShowSort: true, // 显示升序还是降序 true代表降序 false代表升序 rowspan: '1', colspan: '1', }, { value: '表头2', sortflag: true, isShowSort: true, rowspan: '1', colspan: '1', }, { value: '表头3', sortflag: true, isShowSort: true, rowspan: '1', colspan: '1', }, { value: '表头4', sortflag: true, isShowSort: true, rowspan: '1', colspan: '1', }, { value: '表头5', sortflag: true, isShowSort: true, rowspan: '1', colspan: '1', }, { value: '表头6', sortflag: true, isShowSort: true, rowspan: '1', colspan: '1', } ] } ], showDatas: [ { sort1: '33', sort2: '2', sort3: '333', sort4: '11', sort5: '10', sort6: '9', list: [ { value: "33的还是单身的话说的话说的", rowspan: '1', colspan: '1', }, { value: "32", rowspan: '1', colspan: '1', }, { value: "333", rowspan: '1', colspan: '1', }, { value: "34", rowspan: '1', colspan: '1', }, { value: "33", rowspan: '1', colspan: '1', }, { value: "22", rowspan: '1', colspan: '1', }, ] }, { sort1: '44', sort2: '5', sort3: '8', sort4: '89', sort5: '90', sort6: '4', list: [ { value: "44", rowspan: '1', colspan: '1', }, { value: "99", rowspan: '1', colspan: '1', }, { value: "36", rowspan: '1', colspan: '1', }, { value: "43", rowspan: '1', colspan: '1', }, { value: "23", rowspan: '1', colspan: '1', }, { value: "45", rowspan: '1', colspan: '1', }, ] }, { sort1: '54', sort2: '44', sort3: '34', sort4: '23', sort5: '98', sort6: '66', list: [ { value: "54", rowspan: '1', colspan: '1', }, { value: "22", rowspan: '1', colspan: '1', }, { value: "55", rowspan: '1', colspan: '1', }, { value: "77", rowspan: '1', colspan: '1', }, { value: "88", rowspan: '1', colspan: '1', }, { value: "99护士到合适的黄金时代和速度", rowspan: '1', colspan: '1', }, ] }, ], }]
