使用CSS实现细边框，隔行变色，高亮选中行的表格

最新推荐文章于 2022-03-01 13:00:37 发布

[小月]

最新推荐文章于 2022-03-01 13:00:37 发布

阅读量1.8k

点赞数 2

本文链接：https://blog.csdn.net/weixin_43379230/article/details/104187466

版权

这篇博客介绍了如何使用CSS实现细边框、隔行变色以及高亮选中行的表格效果。通过设置`border-spacing`为0消除表格间隔，利用伪元素`:nth-child`实现隔行变色，使用`:hover`伪类实现行高亮。文章提供完整代码示例。

摘要由CSDN通过智能技术生成

表格是网页中的重要组成部分，下面让我们通过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