一、背景颜色
表格的背景颜色可以通过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/n/329781.html
微信扫一扫 
支付宝扫一扫 