想要table表格垂直滾動，加點CSS即可
循環合併表頭
本文使用框架爲 Vue
<template>
<div class="pages-tables" id="pages-tables" style="overflow-x:scroll;">
<table class="table table-bordered" id="table" cellpadding="0" cellspacing="0" ref="rollingTable">
<thead style="display:block;">
<tr v-for="(x,i) in xList" :key="i">
<th class="rows" :class="{'cross': index == 0 && i == 0}" v-for="(l,index) in x" :key="index" :colspan="l.colspan" :rowspan="l.rowspan">{{l.name}}</th>
</tr>
</thead>
<tbody id="table-body">
<tr v-for="(l,i) in yList" :key="i + 'a'">
<template v-for="(x, xKey) in xField">
<td v-for="(ll,yKey) in l" :key="yKey" v-if="x === yKey" :class="{'cols': yKey == xField[0]}">
{{ yList[i][yKey]}}
</td>
</template>
</tr>
</tbody>
</table>
</div>
</template>
<script>
export default {
data() {
return {
maxHeight:'100%',
maxWidth:'100%',
scroll: {
scroller: null
},
xList: [
[
{
field_name: "statis_date",
name: "單號",
colspan: 1, //指定單元格 橫向 跨越的 列數
rowspan: 1, //指定單元格 縱向 跨越的 行數
},
{
field_name: "area_name",
name: "計費時間",
colspan: 1,
rowspan: 1,
},
{
field_name: "area_name1",
name: "發貨客戶名稱",
colspan: 1,
rowspan: 1,
},
{
field_name: "area_name2",
name: "開單金額",
colspan: 1,
rowspan: 1,
},
{
field_name: "area_name3",
name: "業務類型",
colspan: 1,
rowspan: 1,
},
{
field_name: "area_name4",
name: "產品類型",
colspan: 1,
rowspan: 1,
},
{
field_name: "area_name5",
name: "付款",
colspan: 1,
rowspan: 1,
},
{
field_name: "area_name6",
name: "提成獎金",
colspan: 1,
rowspan: 1,
},
{
field_name: "area_name7",
name: "提成標準",
colspan: 1,
rowspan: 1,
}
],
[
{
field_name: "statis_date",
name: "第一行合3行1列",
colspan: 1, //指定單元格 橫向 跨越的 列數
rowspan: 3, //指定單元格 縱向 跨越的 行數
},
{
field_name: "custom_field",
name: "第一行合併2列",
colspan: 2,
rowspan: 1,
},
{
field_name: "custom_field",
name: "第一行合併2列",
colspan: 2,
rowspan: 1,
},
{
field_name: "custom_field",
name: "第一行合併3列",
colspan: 4,
rowspan: 1,
},
],
[
{
field_name: "custom_field",
name: "第二行日期",
colspan: 1, //指定單元格 橫向 跨越的 列數
rowspan: 1, //指定單元格 縱向 跨越的 行數
},
{
field_name: "custom_field",
name: "第二行日期合併2列",
colspan: 2,
rowspan: 1,
},
{
field_name: "custom_field",
name: "第二行日期合併2列",
colspan: 2,
rowspan: 1,
},
{
field_name: "custom_field",
name: "第二行日期合併3列",
colspan: 3,
rowspan: 1,
},
],
[
{
field_name: "area_name",
name: "第三行當月新增",
colspan: 1, //指定單元格 橫向 跨越的 列數
rowspan: 1, //指定單元格 縱向 跨越的 行數
},
{
field_name: "area_name1",
name: "第三行當月新增1",
colspan: 1,
rowspan: 1,
},
{
field_name: "area_name2",
name: "第三行當月新增2",
colspan: 1,
rowspan: 1,
},
{
field_name: "area_name3",
name: "第三行當月新增3",
colspan: 1,
rowspan: 1,
},
{
field_name: "area_name4",
name: "第三行當月新增4",
colspan: 1,
rowspan: 1,
},
{
field_name: "area_name5",
name: "第三行當月新增5",
colspan: 1,
rowspan: 1,
},
{
field_name: "area_name6",
name: "第三行當月新增6",
colspan: 1,
rowspan: 1,
},
{
field_name: "area_name6",
name: "第三行當月新增6",
colspan: 1,
rowspan: 1,
},
],
],
xField: ['statis_date', 'area_name', "area_name1", "area_name2", "area_name3", "area_name4", "area_name5", "area_name6","area_name7"],
yList: [
{
area_name: "新增數據開始",
area_name1: "新增數據開始1",
area_name2: "新增數據開始2",
area_name3: "新增數據開始3",
area_name4: "新增數據開始4",
area_name5: "新增數據開始5",
area_name6: "新增數據開始6",
area_name7: "新增數據開始7",
statis_date: 100001,
},
{
area_name: "新增數據",
area_name1: "新增數據1",
area_name2: "新增數據2",
area_name3: "新增數據3",
area_name4: "新增數據4",
area_name5: "新增數據5",
area_name6: "新增數據6",
area_name7: "新增數據開始7",
statis_date: 201802,
},
{
area_name: "新增數據",
area_name1: "新增數據1",
area_name2: "新增數據2",
area_name3: "新增數據3",
area_name4: "新增數據4",
area_name5: "新增數據5",
area_name6: "新增數據6",
area_name7: "新增數據開始7",
statis_date: 201803,
},
{
area_name: "新增數據",
area_name1: "新增數據1",
area_name2: "新增數據2",
area_name3: "新增數據3",
area_name4: "新增數據4",
area_name5: "新增數據5",
area_name6: "新增數據6",
area_name7: "新增數據開始7",
statis_date: 201804,
},
{
area_name: "新增數據",
area_name1: "新增數據1",
area_name2: "新增數據2",
area_name3: "新增數據3",
area_name4: "新增數據4",
area_name5: "新增數據5",
area_name6: "新增數據6",
area_name7: "新增數據開始7",
statis_date: 201805,
},
{
area_name: "新增數據",
area_name1: "新增數據1",
area_name2: "新增數據2",
area_name3: "新增數據3",
area_name4: "新增數據4",
area_name5: "新增數據5",
area_name6: "新增數據6",
area_name7: "新增數據開始7",
statis_date: 201806,
},
{
area_name: "新增數據",
area_name1: "新增數據1",
area_name2: "新增數據2",
area_name3: "新增數據3",
area_name4: "新增數據4",
area_name5: "新增數據5",
area_name6: "新增數據6",
area_name7: "新增數據開始7",
statis_date: 201807,
},
{
area_name: "新增數據",
area_name1: "新增數據1",
area_name2: "新增數據2",
area_name3: "新增數據3",
area_name4: "新增數據4",
area_name5: "新增數據5",
area_name6: "新增數據6",
area_name7: "新增數據開始7",
statis_date: 201808,
},
{
area_name: "新增數據",
area_name1: "新增數據1",
area_name2: "新增數據2",
area_name3: "新增數據3",
area_name4: "新增數據4",
area_name5: "新增數據5",
area_name6: "新增數據6",
area_name7: "新增數據開始7",
statis_date: 201809,
},
{
area_name: "新增數據",
area_name1: "新增數據1",
area_name2: "新增數據2",
area_name3: "新增數據3",
area_name4: "新增數據4",
area_name5: "新增數據5",
area_name6: "新增數據6",
area_name7: "新增數據開始7",
statis_date: 201810,
},
{
area_name: "新增數據",
area_name1: "新增數據1",
area_name2: "新增數據2",
area_name3: "新增數據3",
area_name4: "新增數據4",
area_name5: "新增數據5",
area_name6: "新增數據6",
area_name7: "新增數據開始7",
statis_date: 201811,
},
{
area_name: "新增數據",
area_name1: "新增數據1",
area_name2: "新增數據2",
area_name3: "新增數據3",
area_name4: "新增數據4",
area_name5: "新增數據5",
area_name6: "新增數據6",
area_name7: "新增數據開始7",
statis_date: 201812,
},
{
area_name: "新增數據",
area_name1: "新增數據1",
area_name2: "新增數據2",
area_name3: "新增數據3",
area_name4: "新增數據4",
area_name5: "新增數據5",
area_name6: "新增數據6",
area_name7: "新增數據開始7",
statis_date: 201813,
},
{
area_name: "新增數據",
area_name1: "新增數據1",
area_name2: "新增數據2",
area_name3: "新增數據3",
area_name4: "新增數據4",
area_name5: "新增數據5",
area_name6: "新增數據6",
area_name7: "新增數據開始7",
statis_date: 201814,
},
{
area_name: "新增數據",
area_name1: "新增數據1",
area_name2: "新增數據2",
area_name3: "新增數據3",
area_name4: "新增數據4",
area_name5: "新增數據5",
area_name6: "新增數據6",
area_name7: "新增數據開始7",
statis_date: 201815,
},
{
area_name: "新增數據",
area_name1: "新增數據1",
area_name2: "新增數據2",
area_name3: "新增數據3",
area_name4: "新增數據4",
area_name5: "新增數據5",
area_name6: "新增數據6",
area_name7: "新增數據開始7",
statis_date: 201816,
},
{
area_name: "新增數據",
area_name1: "新增數據1",
area_name2: "新增數據2",
area_name3: "新增數據3",
area_name4: "新增數據4",
area_name5: "新增數據5",
area_name6: "新增數據6",
area_name7: "新增數據開始7",
statis_date: 201817,
},
{
area_name: "新增數據",
area_name1: "新增數據1",
area_name2: "新增數據2",
area_name3: "新增數據3",
area_name4: "新增數據4",
area_name5: "新增數據5",
area_name6: "新增數據6",
area_name7: "新增數據開始7",
statis_date: 201818,
},
{
area_name: "新增數據",
area_name1: "新增數據1",
area_name2: "新增數據2",
area_name3: "新增數據3",
area_name4: "新增數據4",
area_name5: "新增數據5",
area_name6: "新增數據6",
area_name7: "新增數據開始7",
statis_date: 201819,
},
{
area_name: "新增數據最後",
area_name1: "新增數據最後1",
area_name2: "新增數據最後2",
area_name3: "新增數據最後3",
area_name4: "新增數據最後4",
area_name5: "新增數據最後5",
area_name6: "新增數據最後6",
area_name7: "新增數據開始7",
statis_date: 22220,
}
]
}
},
mounted() {
// this.maxHeight = window.screen.height
this.maxHeight = document.documentElement.clientHeight || document.body.clientHeight;
// this.maxWidth = window.screen.width
this.maxWidth = document.getElementById('table-body').clientWidth || document.body.clientWidth;
console.log(document.documentElement.clientHeight,document.documentElement.clientWidth);
// this.scroll.scroller = createIScroller(".meal-table");
// addWaterMarker(document.getElementById('watermark'))
}
}
</script>
<style lang="scss" scoped>
@media only screen and (width: 375px) and (height: 812px){
}
.pages-tables {
-webkit-overflow-scrolling: touch; // ios滑動順暢
position: relative;
}
.rolling-table {
display: table;
height: 100%;
font-size: 0.28rem;
color: #86939a;
background-color: #fff;
width: 100%;
-webkit-overflow-scrolling: touch;
position: relative;
}
.rows {
position: relative;
z-index: 3;
}
.cross {
position: relative;
z-index: 5;
}
::-webkit-scrollbar {
display: none;
}
.table {
// border-collapse: collapse; //去掉重複的border
// width: 100%;
margin-bottom: 1rem;
color: #86939e;
font-size: 0.32rem;
border: 0px solid #000;
position: relative;
font-size: 12px;
tr{
position: relative;
background-color: #fff;
height: 2rem;
line-height: 2rem;
/* &:nth-of-type(odd){
td{
// background-color: pink;
}
} */
}
td,th {
// border-bottom: 0.02rem solid #eee;
white-space: nowrap;
width: 100px;
height: 2rem;
line-height: 2rem;
padding: 0 0.2rem;
vertical-align: middle;
box-sizing: border-box;
border: 1px solid #F2F2F2;
}
thead {
display:block;
width:100%;
// display: table-header-group;
// vertical-align: middle;
// border-color: inherit;
/*滾動條默認寬度是16px 將thead的寬度減16px*/
// width: calc( 100% - 16px);
}
tbody {
display: block;
height: 215px;
overflow-y: scroll;
// vertical-align: middle;
border-color: inherit;
overflow: scroll;
position: static;
-webkit-overflow-scrolling: touch;
tr {
display: table;
width: 100%;
table-layout: fixed;
td{
text-align: left;
}
}
}
}
</style>