实现CSS表格样式包括圆角、隔行、以及变色的步骤如下:
使用CSS的border-radius属性可以实现表格的圆角效果。
示例代码如下:
table {
border-collapse: collapse;
}
table, td, th {
border: 1px solid #999;
border-radius: 6px;
padding: 10px;
}
这段代码中,我们首先将表格边框合并,并设置了边框的宽度和颜色。然后通过border-radius属性设置元素的圆角半径,这里我们设置了6px的圆角效果。最后给单元格添加padding属性,设置单元格内容和边框的距离。
可以使用伪类选择器:nth-child()来给表格隔行添加样式。
示例代码如下:
tr:nth-child(odd) {
background-color: #f1f1f1;
}
这段代码中,我们首先使用伪类选择器:nth-child()来获取表格中每一行的奇数行,然后设置了行的背景颜色为#f1f1f1。
可以使用伪类选择器:hover来实现鼠标悬停时的变色效果。
示例代码如下:
tr:hover {
background-color: #ddd;
}
这段代码中,我们使用伪类选择器:hover来获取鼠标悬停在表格行上时的效果,然后设置了行的背景颜色为#ddd。
综上,我们可以将以上三个样式合并到一起,实现完整的CSS表格样式代码如下:
table {
border-collapse: collapse;
}
table, td, th {
border: 1px solid #999;
border-radius: 6px;
padding: 10px;
}
tr:nth-child(odd) {
background-color: #f1f1f1;
}
tr:hover {
background-color: #ddd;
}
这段代码包含了圆角、隔行以及变色三个样式,可以实现美观的CSS表格样式。