一、背景颜色
表格的背景颜色可以通过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 | 男 |