一、背景颜色
表格的背景颜色可以通过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 | 女 |
但是这样会导致表头无法滚动，看不到表格内容。如果你需要同时让表头和表格内容都能够横向滚动，可以添加一个div，并将表头和表格内容都包裹在div中：
| 姓名 | 年龄 | 性别 |
|---|---|---|
| 小明 | 18 | 男 |
| 小红 | 20 | 女 |
| 小刚 | 19 | 男 |
| 小李 | 21 | 女 |
| 小张 | 22 | 男 |
| 小王 | 23 | 女 |
| 小黑 | 24 | 男 |
| 小白 | 25 | 女 |
| 小黄 | 26 | 男 |
| 小蓝 | 27 | 女 |
效果如下：
| 姓名 | 年龄 | 性别 |
|---|---|---|
| 小明 | 18 | 男 |
| 小红 | 20 | 女 |
| 小刚 | 19 | 男 |
| 小李 | 21 | 女 |
| 小张 | 22 | 男 |
| 小王 | 23 | 女 |
| 小黑 | 24 | 男 |
| 小白 | 25 | 女 |
| 小黄 | 26 | 男 |
| 小蓝 | 27 | 女 |
四、奇偶行颜色不同
为了使表格更易于阅读，可以将奇数行和偶数行的背景颜色设置成不同的颜色：
tr:nth-child(even) {
background-color: #eee;
}
tr:nth-child(odd) {
background-color: #ccc;
}
效果如下：
| 姓名 | 年龄 | 性别 |
|---|---|---|
| 小明 | 18 | 男 |
| 小红 | 20 | 女 |
| 小刚 | 19 | 男 |
| 小李 | 21 | 女 |
| 小张 | 22 | 男 |
| 小王 | 23 | 女 |
| 小黑 | 24 | 男 |
| 小白 | 25 | 女 |
| 小黄 | 26 | 男 |
| 小蓝 | 27 | 女 |
奇数行和偶数行的样式也可以自定义，例如设置为蓝色和红色：
tr:nth-child(even) {
background-color: blue;
color: white;
}
tr:nth-child(odd) {
background-color: red;
color: white;
}
效果如下：
| 姓名 | 年龄 | 性别 |
|---|---|---|
| 小明 | 18 | 男 |
| 小红 | 20 | 女 |
| 小刚 | 19 | 男 |
| 小李 | 21 | 女 |
| 小张 | 22 | 男 |
| 小王 | 23 | 女 |
| 小黑 | 24 | 男 |
支付宝扫一扫
微信扫一扫
