来说一个原生table固定首列的例子。。因为也是项目中用到的,就一起记录下来吧
参考:https://blog.csdn.net/joyce_lcy/article/details/80390281
<template>
<div class='container'>
<!--第一个表格,只显示第一列,其他列隐藏-->
<div class="table1-container">
<table border=0 cellpadding="0" cellspacing="0">
<tr>
<td>1-1</td>
<td>1-2</td>
<td>1-3</td>
<td>1-4</td>
<td>1-5</td>
<td>1-6</td>
<td>1-7</td>
<td>1-8</td>
</tr>
<tr>
<td>2-1</td>
<td>2-2</td>
<td>2-3</td>
<td>2-4</td>
<td>2-5</td>
<td>2-6</td>
<td>2-7</td>
<td>2-8</td>
</tr>
<tr>
<td>3-1</td>
<td>3-2</td>
<td>3-3</td>
<td>3-4</td>
<td>3-5</td>
<td>3-6</td>
<td>3-7</td>
<td>3-8</td>
</tr>
<tr>
<td>4-1</td>
<td>4-2</td>
<td>4-3</td>
<td>4-4</td>
<td>4-5</td>
<td>4-6</td>
<td>4-7</td>
<td>4-8</td>
</tr>
</table>
</div>
<!--第2个表格隐藏第一列,其他列显示-->
<div class="table2-container">
<table border=0 cellpadding="0" cellspacing="0">
<tr>
<td>1-1</td>
<td>1-2</td>
<td>1-3</td>
<td>1-4</td>
<td>1-5</td>
<td>1-6</td>
<td>1-7</td>
<td>1-8</td>
</tr>
<tr>
<td>2-1</td>
<td>2-2</td>
<td>2-3</td>
<td>2-4</td>
<td>2-5</td>
<td>2-6</td>
<td>2-7</td>
<td>2-8</td>
</tr>
<tr>
<td>3-1</td>
<td>3-2</td>
<td>3-3</td>
<td>3-4</td>
<td>3-5</td>
<td>3-6</td>
<td>3-7</td>
<td>3-8</td>
</tr>
<tr>
<td>4-1</td>
<td>4-2</td>
<td>4-3</td>
<td>4-4</td>
<td>4-5</td>
<td>4-6</td>
<td>4-7</td>
<td>4-8</td>
</tr>
</table>
</div>
</div>
</template>
<script>
export default {
name: 'index',
data(){
return{
}
},
mounted(){
},
methods: {
}
}
</script>
<style scoped>
table{
border-bottom: solid 1px black;
border-left: solid 1px black;
}
td {
border-right: solid 1px black;
border-top: solid 1px black;
padding: 10px;
}
.container{
position: relative;
}
/*两个表格保持一样的宽度*/
.table1-container, .table2-container{
width: 220px;
}
/*让两个表格重叠*/
.table1-container{
position: absolute;
left: 0; top: 0;
overflow: hidden;
color: red;
}
.table1-container td:first-child{
background-color: white;
}
/*第一个表格只显示第一列*/
.table1-container td:not(:first-child){
visibility: hidden;
}
.table2-container{
overflow: scroll;
}
</style>