使⽤CSS实现细边框，隔⾏变⾊，⾼亮选中⾏的表格表格是⽹页中的重要组成部分，下⾯让我们通过CSS来实现⼀个细边框，隔⾏变⾊，⾼亮选中⾏的表格；以便⼀同学习参考。细边框表格
1. 先来看⼀段HTML代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
table{
border: 1px solid #999999;
margin: 16px auto;
width: 300px;
}
th{
border: 1px solid #999999;
padding: 8px 0;
}
td{
border: 1px solid #999999;
padding: 8px 0;
}
</style>
</head>
<body>
<table>
<caption>⽇期</caption>
<thead>
<tr>
<th>年</th>
<th>⽉</th>
<th>⽇</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</body>
</html>
2. 这段HTML代码在浏览器上显⽰如下表格：
3. 可以看到上⾯表格的每个单元之间、单元与最外的边框之间有⼀个间隔，这样的表格看起来是不太美观的。那么怎么去掉这个间隔
呢？通过浏览器检查table元素可以发现table的styles中有 border-spacing: 2px；这样⼀条样式声明。border-spacing属性是⽤来指定相邻单元格边框之间的距离。相当于HTML ‘cellspacing’ 属性如果我们将border-spacing`属性的值设置为0即可通过css消除表格单元格之间的间隔。
4. 消除单元格间的间隔后，边框线条变粗了，这是由于单元格的两个边框重叠导致的。我们只要设置th、td的⼀半边框，table的另⼀半
边框即可解决这问题。
1. css代码如下：
table{
border-spacing: 0;
border-top: 1px solid #999999;
border-left: 1px solid #999999;
margin: 16px auto;
width: 300px;
}
th{
border-right: 1px solid #999999;
border-bottom: 1px solid #999999;
padding: 8px 0;
}
td{
border-right: 1px solid #999999;
border-bottom: 1px solid #999999;
padding: 8px 0;
}
2. 浏览器中的效果如下
实现表格的隔⾏变⾊
1. 通过CSS3 的 :nth-child(an+b)选择器我们可以实现隔⾏变⾊的效果。:nth-child(an+b)选择器⾸先到所有当前元素的兄弟元素，然后
按照位置先后顺序从1开始排序，选择的结果为表达式an+b匹配到的元素集合。（n=0,1,2,3…)
html表格内外边框颜1. tr:nth-child(2n+1)：匹配表格中的奇数⾏
2. tr:nth-child(2n)：匹配表格中的偶数⾏
3. tr:nth-child(1)：匹配表⽰⼀组兄弟元素中的第⼀个，且为tr的元素
2. 实现隔⾏变⾊的CSS代码：
/*设置表格奇数⾏的背景颜⾊*/
tr:nth-child(2n+1){
background-color:rgba(166, 221, 53, 0.70);
}
/*设置表格偶数⾏的背景颜⾊*/
tr:nth-child(2n){
background-color:rgba(237, 237, 237, 0.86);
}
/*设置表格th⾏的背景颜⾊*/
thead tr:first-child{
background-color:rgba(39, 153, 144, 0.91);
}
3. 浏览器中的效果：
实现选中⾏⾼亮
1. 通过css的伪类 :hover可以实现将⿏标移动到表格⾏上的⾼亮效果。
2. 实现⾼亮的css代码如下
/*设置⾼亮*/
tr:hover{
background-color:rgba(255, 254, 200, 0.77);
}
3. 浏览器中的效果：
完整的代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>实验</title>
<style>
table{
border-spacing: 0;
border-top: 1px solid #999999;
border-left: 1px solid #999999;
margin: 16px auto;
width: 300px;
}
th{
border-right: 1px solid #999999;
border-bottom: 1px solid #999999;
padding: 8px 0;
}
td{
border-right: 1px solid #999999;
border-bottom: 1px solid #999999;
padding: 8px 0;
}
/*设置表格奇数⾏的背景颜⾊*/
tr:nth-child(2n+1){
background-color:rgba(166, 221, 53, 0.70);
}
/*设置表格偶数⾏的背景颜⾊*/
tr:nth-child(2n){
background-color:rgba(237, 237, 237, 0.86);
}
/*设置表格th⾏的背景颜⾊*/
thead tr:first-child{
background-color:rgba(39, 153, 144, 0.91);
}
/*设置⾼亮*/
tr:hover{
background-color:rgba(255, 254, 200, 0.77);
}
</style>
</head>
<body>
<table>
<caption>⽇期</caption>
<thead>
<tr>
<th>年</th>
<th>⽉</th>
<th>⽇</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。