一、背景顏色
表格的背景顏色可以通過CSS設置，將表格的背景顏色設置為灰色：
table {
background-color: #ccc;
}
效果如下：
| 姓名 | 年齡 | 性別 |
|---|---|---|
| 小明 | 18 | 男 |
| 小紅 | 20 | 女 |
當然，你也可以設置表頭和表格行的不同顏色：
thead {
background-color: #ccc;
}
tbody {
background-color: #eee;
}
效果如下：
| 姓名 | 年齡 | 性別 |
|---|---|---|
| 小明 | 18 | 男 |
| 小紅 | 20 | 女 |
二、表格邊框
表格的邊框也可以通過CSS進行設置：
table {
border-collapse: collapse;
}
td, th {
border: 1px solid #ccc;
}
效果如下：
| 姓名 | 年齡 | 性別 |
|---|---|---|
| 小明 | 18 | 男 |
| 小紅 | 20 | 女 |
如果你想讓表格的邊框更加粗一些，可以調整border屬性的值：
td, th {
border: 2px solid #ccc;
}
效果如下：
| 姓名 | 年齡 | 性別 |
|---|---|---|
| 小明 | 18 | 男 |
| 小紅 | 20 | 女 |
三、表頭固定
如果表格的內容很多，需要滾動才能看到所有的行，那麼表頭就可能被滾動出屏幕外。為了避免這種情況，可以讓表頭固定在頁面上方：
thead {
position: fixed;
}
效果如下：
| 姓名 | 年齡 | 性別 |
|---|---|---|
| 小明 | 18 | 男 |
| 小紅 | 20 | 女 |
| 小剛 | 19 | 男 |
| 小李 | 21 | 女 |
| 小張 | 22 | 男 |
| 小王 | 23 | 女 |
| 小黑 | 24 | 男 |
| 小白 | 25 | 女 |
| 小黃 | 26 | 男 |
| 小藍 | 27 | 女 |
原創文章，作者：PALZR，如若轉載，請註明出處：https://www.506064.com/zh-hant/n/329781.html
微信掃一掃 
支付寶掃一掃 