CSS表格样式:圆角,隔行,变色的具体实现

2023-12-15css教程
8

实现CSS表格样式包括圆角、隔行、以及变色的步骤如下:

1. 圆角表格样式

使用CSS的border-radius属性可以实现表格的圆角效果。

示例代码如下:

table {
  border-collapse: collapse;
}
table, td, th {
  border: 1px solid #999;
  border-radius: 6px;
  padding: 10px;
}

这段代码中,我们首先将表格边框合并,并设置了边框的宽度和颜色。然后通过border-radius属性设置元素的圆角半径,这里我们设置了6px的圆角效果。最后给单元格添加padding属性,设置单元格内容和边框的距离。

2. 隔行样式

可以使用伪类选择器:nth-child()来给表格隔行添加样式。

示例代码如下:

tr:nth-child(odd) {
  background-color: #f1f1f1;
}

这段代码中,我们首先使用伪类选择器:nth-child()来获取表格中每一行的奇数行,然后设置了行的背景颜色为#f1f1f1。

3. 变色样式

可以使用伪类选择器: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表格样式。

The End

相关推荐

背景图片自适应浏览器分辨率大小并自动拉伸全屏代码
下面是“背景图片自适应浏览器分辨率大小并自动拉伸全屏”的完整攻略。...
2023-12-15 css教程
367

简单但很实用的5个css属性
下面是详细讲解“简单但很实用的5个CSS属性”的完整攻略:...
2023-12-15 css教程
34

我的css框架——base.css(重设浏览器默认样式)
第一步:创建项目文件夹...
2023-12-15 css教程
195

兼做美工之导航条制作过程分享
以下是兼做美工之导航条制作过程分享的完整攻略:...
2023-12-15 css教程
15

JS 控制CSS样式表
JS 控制 CSS 样式表的方式主要有两种:通过修改样式属性来修改元素样式,以及通过切换 CSS 类名来切换元素样式。下面分别给出具体的步骤和示例说明。...
2023-12-15 css教程
25

Html5实现首页动态视频背景的示例代码
实现首页动态视频背景,可以使用HTML5的video标签,下面是具体的示例代码和操作步骤:...
2023-12-15 css教程
397