見代碼:
.table-fixed-box {
position: relative;
}
.fixed__header {
position: absolute;
top: -38px;
width: 100%;
left: 0;
margin: 0;
overflow: hidden;
z-index: 102;
background: white;
}
.row-table {
width: 100%;
text-align: left;
table-layout: fixed
}
.row-table thead {
color: #97a8b8;
}
.row-table thead th {
border-bottom: 1px solid #eee;
line-height: 38px;
text-align: left;
position: relative;
}
.fixed__table {
display: block;
margin-top: 38px;
width: 100%;
min-height: 200px;
max-height: 580px;
overflow-y: auto;
}
.row-table tbody tr{
width: 100%;
border-bottom: 1px solid #eee;
}
.row-table tbody td {
position: relative;
line-height: 30px;
text-align: left;
font-size: 12px;
}
<div class="table-fixed-box">
<div class="fixed__header">
<table class="row-table" v-show="table !== ''">
<colgroup>
<col :width="(Number(index)+1) == table.title.length?' ':item.minWidth" v-for="(item,index) in table.title" :key="index">
<col>
</colgroup>
<thead>
<tr>
<th :width="(Number(index)+1) == table.title.length?' ':item.minWidth" v-for="(item,index) in table.title" :key="index">{{selectTitle(item.title)}}</th>
<th></th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
<div class="fixed__table">
<table class="row-table" v-show="table !== ''">
<colgroup>
<col :width="(Number(index)+1) == table.title.length?' ':item.minWidth" v-for="(item,index) in table.title" :key="index">
<col>
</colgroup>
<thead>
<tr style="display: none;">
<th :width="(Number(index)+1) == table.title.length?' ':item.minWidth" v-for="(item,index) in table.title" :key="index">{{selectTitle(item.title)}}</th>
</tr>
</thead>
<tbody>
<tr v-for="(item,index) in table.data" :key="index">
<td :width="(Number(Index)+1) == table.title.length?' ':items.minWidth" v-for="(items,Index) in table.title" :key="Index">{{item[items.field]}}</td>
<td></td>
</tr>
</tbody>
</table>
</div>
</div>
width三目運算的作用是讓最後一個td的寬度保持自適應,這樣表格就不會撐不滿100%的寬度
兩個位置同樣如此
thead、tbody中也是一樣都要多留一個
如果不留的話就是這樣的效果