< 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 >