< html lang ="zh" >
< head >
< meta charset ="UTF-8" >
< meta name ="viewport" content ="width=device-width, initial-scale=1.0" >
< title >純CSS實現表格首行和首列固定
< script src ="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" >
<樣式>
.main {
width : 500px ;
overflow : auto ;
height : 208px ; /*設置固定高度*/
}
td, th {
/*設置td,th寬度高度*/
border : 1px solid gray ;
width : 100px ;
height : 30px ;
}
th {
background-color : lightblue ;
}
table {
table-layout : fixed ;
width : 200px ; /*固定寬度*/
}
td:first-child, th:first-child {
position : sticky ;
left : 0 ; /*首行永遠固定在左側*/
z-index : 1 ;
background-color : lightpink ;
}
thead tr th {
position : sticky ;
top :0 ; /*列首永遠固定在頭部 */
}
th:first-child {
z-index : 2 ;
background-color : lightblue ;
}
< body >
< div id ="app" >
< div class ="main" >
< table >
< thead >
< tr >
< th >
< _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ th > <身體> <
tr v-for ="(item, index) in 30" :key ="index" >
< td >
< td >
< td >
< td >
< td > <
td > < / td > < td > < / td > < td > < td
>