html table表格隔行变色,css table表格隔行变色,vue中table表格隔行变色,element ui的table组件，ant-design的table组件

最新推荐文章于 2024-04-19 20:39:07 发布

码猿小菜鸡

最新推荐文章于 2024-04-19 20:39:07 发布

阅读量4.8k

点赞数 6

本文链接：https://blog.csdn.net/weixin_47160526/article/details/115599242

版权

定义说明类专栏收录该内容

10 篇文章 1 订阅

订阅专栏

HTML table表格隔行变色

1. :nth-child(): 定义和用法

:nth-child(n) ：选择器匹配父元素中的第n个子元素。n可以是一个数字，一个关键字，或者一个公式

在这里插入图片描述

2. CSS样式：

 <style>
         /*设置奇数行颜色*/
         table tr:nth-child(odd)
         {
            background: rgb(178, 178, 179);
         }
         /*设置偶数行颜色*/
         table tr:nth-child(even)
         {
            background: rgb(241, 241, 241);
         }
         /*设置鼠标聚焦到行上是凸显*/
         table tr:hover{
            background-color: rgb(121, 121, 121);
         }
 </style>

在这里插入图片描述

3. 综合代码：

<!DOCTYPE HTML>
<html>
   <head>
      <style>
         /*设置奇数行颜色*/
         table tr:nth-child(odd)
         {
            background: rgb(178, 178, 179);
         }
         /*设置偶数行颜色*/
         table tr:nth-child(even)
         {
            background: rgb(241, 241, 241);
         }
         /*设置鼠标聚焦到行上是凸显*/
         table tr:hover{
            background-color: rgb(121, 121, 121);
         }
      </style>
   </head>
   <body>
      <div id="table1" style="width: 500px;height: 200px;border-color: #f2f2f2;text-align: center;">
        <table style="width: 100%;height: 100%;">
           <tr>
              <th>姓名</th>
              <th>性别</th>
              <th>年龄</th>
              <th>住址</th>
           </tr>
           <tr>
              <td>张三</td>
              <td>女</td>
              <td>19</td>
              <td>山东</td>
           </tr>
           <tr>
            <td>李四</td>
            <td>男</td>
            <td>20</td>
            <td>上海</td>
         </tr>
         <tr>
            <td>王五</td>
            <td>女</td>
            <td>15</td>
            <td>湖南</td>
         </tr>
         <tr>
            <td>李六</td>
            <td>男</td>
            <td>21</td>
            <td>广东</td>
         </tr>
        </table>
      </div>
   </body>
</html>

4.高效组件

一键式table样式可以使用element ui 或者ant-design，直接点击红色链接，找到自己喜欢的样式copy代码即可，非常方便

在这里插入图片描述

谢谢支持 🌹🌹🌹

码猿小菜鸡

关注

6
点赞
踩
18

收藏

觉得还不错? 一键收藏
1
评论
html table表格隔行变色,css table表格隔行变色,vue中table表格隔行变色,element ui的table组件，ant-design的table组件

HTML table表格隔行变色:nth-child(): 定义和用法:nth-child(n) ：选择器匹配父元素中的第n个子元素。n可以是一个数字，一个关键字，或者一个公式 <style> /*设置奇数行颜色*/ table tr:nth-child(odd) { background: rgb(178, 178, 179); } /*设置偶数行颜色*/
复制链接

扫一扫