CSS tr固定例子
/* 創(chuàng)建一個(gè)外層div，設(shè)置它的寬度、高度和overflow屬性為auto（或scroll，這樣你就可以垂直滾動(dòng)它）*/
.outer-wrapper {
width: 100%;
height: 200px;
overflow-y: auto;
}
/* 創(chuàng)建一個(gè)內(nèi)層div，設(shè)置它的寬度等于外層div的寬度 */
.inner-wrapper {
width: 100%;
}
/* 創(chuàng)建一個(gè)table */
table {
width: 100%;
border-collapse: collapse;
}
/* 設(shè)置表頭th的樣式 */
table th {
background-color: #eee;
position: sticky;
top: 0;
}
/* 設(shè)置第一列td的樣式 */
table td:first-child {
position: sticky;
left: 0;
background-color: #eee;
}
/* 設(shè)置表格數(shù)據(jù)td的樣式 */
table td {
border: 1px solid #ccc;
}
/* 示例table */| 姓名 | 年齡 | 性別 | 工作 | 愛好 |
|---|---|---|---|---|
| 小明 | 20 | 男 | 程序員 | 籃球、足球、游戲 |
| 小紅 | 18 | 女 | 設(shè)計(jì)師 | 看電影、旅游、釣魚 |
| 小剛 | 22 | 男 | 產(chǎn)品經(jīng)理 | 音樂、寫作、游泳 |
| 小麗 | 23 | 女 | 市場(chǎng)專員 | 購(gòu)物、美食、跳舞 |
| 小李 | 24 | 男 | 銷售代表 | 旅游、騎車、讀書 |
| 小芳 | 26 | 女 | 人事經(jīng)理 | 唱歌、跑步、看小說 |