纯css表格table隔行显示不同颜色

最新推荐文章于 2025-05-07 14:32:41 发布
最新推荐文章于 2025-05-07 14:32:41 发布
阅读量9.7k 收藏 9
点赞数 1
CC 4.0 BY-SA版权
分类专栏： js+css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/baidu_20876831/article/details/80614607
本文介绍了如何使用纯CSS来让HTML表格隔行显示不同的颜色。通过在CSS中添加`table tr:nth-child(odd)`或`table tr:nth-child(even)`选择器，可以分别设置奇数行或偶数行的背景色，实现表格的视觉效果优化。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

方法/步骤

  1. 1

    制作简单表格，代码如下：

    <!DOCTYPE html>

    <html>

    <head>

    <meta charset="UTF-8">

    <title></title>

    <style>

    table,tr,td,th{

    padding: 0;

    margin: 0;

    }

    table{

    width: 100%;

    border-color: #ccc;

    }

    table tr{

    line-height: 30px;

    border-color: #ccc;

    }

    table th,table td{

    text-align: center;

    border-color: #ccc;

    }

    </style>

    </head>

    <body>

    <table border="1" cellspacing="0">

    <tr>

    <th>1</th>

    <th>2</th>

    <th>3</th>

    </tr>

    <tr>

    <td>1-1</td>

    <td>1-2</td>

    <td>1-3</td>

    </tr>

    <tr>

    <td>1-1</td>

    <td>1-2</td>

    <td>1-3</td>

    </tr>

    <tr>

    <td>1-1</td>

    <td>1-2</td>

    <td>1-3</td>

    </tr>

    <tr>

    <td>1-1</td>

    <td>1-2</td>

    <td>1-3</td>

    </tr>

    </table>

    </body>

    </html>

  2. 2

    表格样式为：

    纯css表格table隔行显示不同颜色
  3. 3

    添加属性样式：

    table tr:nth-child(odd){

    background: #ccc;

    }

    结果如图所示可设置奇数行背景

    纯css表格table隔行显示不同颜色
  4. 4

    当需要偶数行背景时使用样式：

    table tr:nth-child(even){

    background: #ccc;

    }

    纯css表格table隔行显示不同颜色
CSS实现table表格：隔行换色的效果
pan_junbiao的博客
07-12 2090
表格是网页中十分重要的组成元素。表格用来存储数据，包含标题、表头、行和单元格。在HTML语言中，表格标记使用符号表示。定义表格光使用是不够的，还需要定义表格中的行、列、标题等内容。在CSS中，可以使用 nth-child 选择器来实现隔行换色。该选择器用于匹配父元素中的特定子元素，nth-child(odd) 可以匹配奇数行，nth-child(even) 可以匹配偶数行。使用CSS样式实现 table 表格隔行换色的效果。
layui数据表格table隔行换色
qq_41975676的博客
03-30 1052
两种方法，一种是官方文档给的参数 第二种利用回调来操作 done:function(res, curr, count){ var that=this.elem.next() res.data.forEach((item,index) => { if(index%2==0){ var tr=that.find(".layui-table-box tbody tr[data-index='"+index+"']"
使用CSS实现table隔行变色
Java技术
11-01 7208
方法一：tr:nth-child(odd){background:#F4F4F4;}方法二：tr {background-color:expression((this.sectionRowIndex%2==0)?"red":"blue")}
网页表格美化：隔行换色与鼠标悬停变色的实现技术
最新发布
weixin_30951515的博客
05-07 909
通过这些基础和高级的技巧，我们可以创建出既能吸引用户注意又具有良好性能的悬停效果。在实现这些效果的过程中，我们需要综合考虑易用性、无障碍性和性能优化，以确保最终产品能够满足更广泛的用户群体的需求。在前端开发中，浏览器兼容性问题一直是让人头疼的问题。不同浏览器对Web标准的实现程度不同，导致了同样一段代码在不同浏览器中表现不一致。例如，早期的IE浏览器对W3C标准的支持不完全，CSS和JavaScript的行为与现代标准浏览器存在较大差异。
CSS表格隔行变色
qq_43843936的博客
07-03 944
1、奇数行加颜色 table tr:nth-child(odd){ background: #ccc; } 2、偶数行加颜色 table tr:nth-child(even){ background: #ccc; }
CSS控制表格隔行变色与鼠标滑过变色
nahelulu的专栏
08-03 1428
http://www.cssk8.com/html/css_Tutorial/201001/12-1933.html （2）用JS 鼠标滑过变色： window.onload=function showtable(){ var tablename=doc
jQuery实现Table表格隔行变色及高亮显示当前选择行效果示例
12-04
在网页设计中，表格（Table）是常见的数据展示方式，而为了提高用户体验，常常需要对表格进行美化，比如隔行变色以及高亮显示当前选中的行。本篇将详细介绍如何使用jQuery实现这一功能。 首先，jQuery是一个轻量级...
css美化表格让其隔行变色显示
01-19
复制代码代码如下: /*css*/ /*表格修饰*/ .tablelist{ border:1px solid #0058a3; font-family:”Microsoft YaHei”,Arial,Helvetica,sans-serif; border-collapse:collapse; border-spacing:1pt; background-color:...
懒人原生css3样式控制table表格隔行高亮显示
06-12
效果描述： 你是否还在为你的网页中复杂而又丑陋的表格而烦恼？ 往往很多默认的表格都不好看，而样式又比较难以控制 ... 今天懒人站长特意整理了... 1、head中的css样式复制到你的样式表中即可实现漂亮的table效果
css :nth-child(even) 实现表格 隔行变色
逆风优雅的博客
01-07 648
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Do.
html中table为每个单元格设置不同颜色和宽度
09-28
最好不要在table里面直接设置宽度，高度等，在style里面添加设置，就不会出现无效问题，代码直接拷贝到body中间即可使用，下面有个示例，大家可以参考下
使用BootStrap实现表格隔行变色及hover变色并在需要时出现滚动条
01-19
废话不多说了，直接给大家贴代码了，具体代码如下所示： <%@ page language=java import=java.util.* pageEncoding=UTF-8%> <html> <head> <!-- 引入的css压缩文件 --> <link rel=stylesheet type=text/css href=<%=request.getContextPath()%>/resources/css/bootstrap.min.css> </head> <body> <tabl
layui的表格table选中数据后更改本行的颜色
10-17
在layui的表格table中，选中某行数据之后更改本行颜色，取消选中后恢复原样式。在layui的表格table中，选中某行数据之后更改本行颜色，取消选中后恢复原样式。
table隔行变色的css
semi_zhou的专栏
02-25 3411
Css3实现表格隔行变色或隔列变色 .tableStyle { border-collapse:collapse; border-spacing:0; } .tableStyle tr { background-color: expression((this.rowIndex % 2 == 0) ? "#F4F4F4" : "#FFF" ); } .tableStyle tr:
Element UI表格隔行变色
qq_44158162的博客
12-01 8605
表格隔行变色有两种方式 第一种，我们给表格设置“stripe”属性 <el-table :data="tableWarningData" style="width: 100%" :header-cell-style="{ color: '#1572e9' }" stripe :cell-style="changeCellStyle"> 然后在style里面写下如下代码 .el..
纯CSS打造隔行变色表格
auyeung_anne的专栏
04-11 1561
纯CSS打造隔行变色表格 45 Replies 不知道各位用过Excel没有？在处理大量数据的时候，Excel隔行变色的设计是不是让你舒服很多？ 现在网上有很多利用jQuery制作隔行变色表格的教程，但你认为为了小小的一个表格而加载50多k的js是否值得？即使贵站有大量表格，其实还不如用CSS方便。要知道这个效果到底有多方便，看下去就知道了。 首先写好表格内容，通常如下：
纯CSS table 表格奇偶行不同颜色实现
weixin_30394633的博客
08-09 1040
CSS代码 .table-stripedtbodytr:nth-child(odd)td{ background-color:Red; } 页面代码 1<html> 2<head> 3<metahttp-equiv="Content-Type"content="text/html;char...
CSS 隔行显示不同颜色
yanghedalian的专栏
06-13 819
$(document).ready(function(){     $("tr:even").css("background-color","red"); });     Welcome to My Web Page Id LastName FirstName Address City
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值