使用CSS实现细边框，隔行变色，高亮选中行的表格表格是网页中的重要组成部分，下面让我们通过CSS来实现一个细边框，隔行变

表格是网页中的重要组成部分，下面让我们通过CSS来实现一个细边框，隔行变色，高亮选中行的表格；以便一同学习参考。

细边框表格

先来看一段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>

这段HTML代码在浏览器上显示如下表格：

$外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FKxuKNEL-1580903287389)(images/table1.png)$
可以看到上面表格的每个单元之间、单元与最外的边框之间有一个间隔，这样的表格看起来是不太美观的。那么怎么去掉这个间隔呢？通过浏览器检查table元素可以发现table的styles中有 border-spacing: 2px;这样一条样式声明。border-spacing属性是用来指定相邻单元格边框之间的距离。相当于HTML 'cellspacing' 属性如果我们将border-spacing`属性的值设置为0即可通过css消除表格单元格之间的间隔。

$外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3XSpqNZ1-1580903287391)(images/table2.png)$

$外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-oOywVK7B-1580903287391)(images/table3.png)$

消除单元格间的间隔后，边框线条变粗了，这是由于单元格的两个边框重叠导致的。我们只要设置th、td的一半边框，table的另一半边框即可解决这问题。

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;
    }

浏览器中的效果如下

$外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Fs9wfI9Z-1580903287392)(images/table4.png)$

实现表格的隔行变色

通过CSS3 的 :nth-child(an+b)选择器我们可以实现隔行变色的效果。:nth-child(an+b)选择器首先找到所有当前元素的兄弟元素，然后按照位置先后顺序从1开始排序，选择的结果为表达式an+b匹配到的元素集合。（n=0,1,2,3...)
- tr:nth-child(2n+1):匹配表格中的奇数行
- tr:nth-child(2n):匹配表格中的偶数行
- tr:nth-child(1):匹配表示一组兄弟元素中的第一个，且为tr的元素

实现隔行变色的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);
}

浏览器中的效果：

$外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-v23Px3UJ-1580903287393)(images/table5.png)$

实现选中行高亮

通过css的伪类 :hover可以实现将鼠标移动到表格行上的高亮效果。

实现高亮的css代码如下

/*设置高亮*/
tr:hover {
    background-color: rgba(255, 254, 200, 0.77);
}

浏览器中的效果：

$外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yPgd6jeF-1580903287394)(images/table6.png)$

完整的代码：

<!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>
        <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>