vue 表格固定首行首列(纯css)
<template><div className="table_wrap"><table><thead><tr><th v-for="(n,i) of 6" :key="i">表头{{i}}</th></tr></thead><tbody>
·
<template>
<div className="table_wrap">
<table>
<thead>
<tr>
<th v-for="(n,i) of 6" :key="i">表头{{i}}</th>
</tr>
</thead>
<tbody>
<tr v-for="(n,i) of 100" :key="i">
<td v-for="(m,j) of 6" :key="j">内容{{j}}</td>
</tr>
</tbody>
</table>
</div>
</template>
<style lang="scss" scoped>
.table_wrap{
width:100%;
height: 80vh;
overflow: auto;
border-bottom:1px solid #61dafb;
}
table {
table-layout: fixed;
width: 100%;
border-collapse:separate;
border-spacing:0;
border:0;
}
td, th{
width:150px;
box-sizing: border-box;
border-right:1px solid red;
border-bottom:1px solid red;
/*超出长度...*/
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
thead tr th {
position:sticky;
top:0;
// background:#61dafb;
background:pink;
}
th:first-child, td:first-child {
position:sticky;
left:0;
background:#61dafb;
}
th:first-child {
z-index:1; /*左上角单元格z-index,切记要设置,不然表格纵向横向滚动时会被该单元格右方或者下方的单元格遮挡*/
background:pink;
}
</style>
更多推荐
已为社区贡献4条内容
所有评论(0)