在动态创建的表格中引导交替行颜色
可以通过CSS样式来实现。可以使用伪类选择器:nth-child()来选择表格中的奇偶行，并为其设置不同的背景颜色。
具体步骤如下：
- 在HTML中创建一个表格，可以使用table、tr和td等标签来定义表格的结构。
- 在CSS中定义一个样式，选择表格中的奇数行或偶数行，并设置不同的背景颜色。例如：
tr:nth-child(odd) {
background-color: #f2f2f2;
}
tr:nth-child(even) {
background-color: #ffffff;
}- 将定义好的样式应用到表格中。可以通过为表格的父元素添加一个class，并在CSS中使用该class选择器来应用样式。例如：
<div class="table-container">
<table>
<tr>
<td>数据1</td>
<td>数据2</td>
</tr>
<tr>
<td>数据3</td>
<td>数据4</td>
</tr>
<!-- 更多行... -->
</table>
</div>.table-container table tr:nth-child(odd) {
background-color: #f2f2f2;
}
.table-container table tr:nth-child(even) {
background-color: #ffffff;
}这样，表格中的奇数行和偶数行就会交替显示不同的背景颜色，提高表格的可读性。
腾讯云相关产品和产品介绍链接地址：
- 云服务器（CVM）：提供弹性计算能力，满足各类业务需求。产品介绍链接
- 云数据库 MySQL 版（CDB）：提供稳定可靠的云端数据库服务。产品介绍链接
- 云存储（COS）：提供安全可靠的对象存储服务，适用于各类数据存储需求。产品介绍链接
请注意，以上仅为腾讯云的部分产品示例，其他云计算品牌商也提供类似的产品和服务。
相关·内容
2回答
如何创建按行和按列显示颜色的html表？
html、css
我看过这张图片，上面显示了一张非常漂亮的桌子：
我有html代码，给每一个偶数行颜色。每年的列和子列也有一种颜色。有没有一种方法可以让年份列和偶数行中的单元格具有新的不同混合颜色，以及年份列和奇数行中的单元格具有新的不同混合颜色，就像图中所示？我不想使用像这样的东西：
.mixed_odd {background-color: #44ff99}
.mixed_even {background-color: #99ff99}
因为我的页面将有许多行，在某些情况下超过200行，并且手动设置这些列的颜色需要花费大量时间。有没有一种快速的css方式可以像图片中那样做呢？
table {
浏览 0提问于2019-01-17得票数 1
2回答
jquery，css未应用于表
php、jquery、css
我使用表格和一些css的用户外观和感觉。这些表是由其他一些jquery插件制作的，比如dataTable
我的php代码如下
<table width="100%" id="top_visit_table">
<thead>
<tr align="left">
<th>Product Id</th><th>Product Name</th><th>Product Price</th><
浏览 0提问于2012-03-19得票数 1
回答已采纳
4回答
css:将颜色混合到现有背景色中的类？
html、css、colors、background-color
我有一个包含交替颜色行的表格，例如：
<table>
<tr class="even"><td></td><td></td></tr>
<tr class="odd"> <td></td><td></td></tr>
<tr class="even"><td></td><td></td></tr>
<
浏览 0提问于2012-03-28得票数 2
回答已采纳
8回答
行的交替背景色
javascript、html、css
我工作的背景颜色交替，并面临一些挑战。我只想通过CSS或JavaScript/jQuery将背景颜色设置为奇怪的行。在小提琴中，我故意隐藏偶数行，因为要求是相同的。我试图使用jQuery来实现它，但无法继续下去。伙计们，请不要建议我用DIV代替桌子。不幸的是，我的工作是旧标记(内联网网站)。对于现有的HTML标记，请提供帮助/指导。
if($('table tr').hasClass('odd')){
$(this).find('td :first-child').css('background','
浏览 12提问于2013-09-11得票数 1
回答已采纳
2回答
帮助对可排序表格中的行进行颜色替换
javascript、jquery、tablesorter
我正在使用jQuery 插件。我是jQuery的新手，需要jQuery忍者的帮助。
我的表有可选颜色的行。我使用CSS nth-child()来交替各行。
table.tablesorter tbody tr:nth-child(odd) td {
background-color:#FBFBFB;
}
它在Chrome和Firefox上运行良好，但IE不喜欢它。IE不支持第n个孩子。
我试着控制颜色--在页面加载时用JavaScript交替。
$(document).ready(function() {
$('#packageTbl').tablesorter()
浏览 4提问于2011-04-26得票数 0
回答已采纳
1回答
此CSS规则可以很好地工作：
.TabSymbols tr:nth-child(even) { background-color: #f2f2f2; }
每隔一行都有一个背景色。
现在想象一个有四列的表。第三列和第四列中的每个表格单元格都有类"Date"...
<td class="Date">
以下样式应用于.Date：
.Date { background: #666; color: #fff; }
但这里有一个问题:我不希望每个具有类日期的单元格都有背景颜色。相反，我希望样式符合上面列出的第一条规则。因此，每个偶数行中的前两个单元格的背景颜色为
浏览 10提问于2017-02-19得票数 2
回答已采纳
10回答
是否使用CSS替换表格行颜色？
html、css、html-table
我正在使用一个具有交替行颜色的表格。
tr.d0 td {
background-color: #CC9999;
color: black;
}
tr.d1 td {
background-color: #9999CC;
color: black;
}
<table>
<tr class="d0">
<td>One</td>
<td>one</td>
</tr>
<tr class="d1">
<td>
浏览 15提问于2010-06-21得票数 498
回答已采纳
2回答
CSS HTML5表<td>被<tr>覆盖
css、html
我有一个表，并将td设置为css：
.table-striped>tbody>tr:nth-child(odd)>td, .table-striped>tbody>tr:nth-child(odd)>th {
background-color: #f9f9f9;
}
但我需要用另一种颜色覆盖单个tr行的背景色。
这个是可能的吗？如果我不删除上面的样式，它就不起作用了。
谢谢
浏览 7提问于2015-02-17得票数 0
回答已采纳
2回答
tablerow背景颜色不适用于tabledata #css
css、background-color
所以我在HTML和CSS方面是新手，但我必须为我的学校科目做一些“工作”。这个想法是通过使用表中偶数/奇数单元格的颜色来创建某种类型的棋盘，而且我不能编辑.html文件。
table tr:nth-child(even){
background-color: #9c9c9c;
}
table td:nth-child(odd){
background-color: #ffffff;
}
table td:nth-child(even){
background-color: #c8ccc6;
}
table tr:nth-child(odd){
background-color: #d8db
浏览 0提问于2021-01-19得票数 0
1回答
设置特定列和行的样式
html、css、html-table
我正在尝试对我创建的5x4表的某些特定部分进行样式化。应该是这样的：
每一行偶数和奇数行应该有不同的颜色。
第二列、第三列和第四列中的文本应居中。
我有一张桌子：
<table>
<caption>Some caption</caption>
<colgroup>
<col>
<col class="value">
<col class="value">
<col class="value">
</colgroup
浏览 1提问于2011-11-25得票数 0
回答已采纳
4回答
用交替的行颜色重写表中单行的行颜色
html、css
我有一个具有CSS3交替行样式的表，但是我需要覆盖一些行的样式。
下面是表格的CSS：
table.primary tr:nth-child(odd) {
background-color: #e5e5e5;
}
table.primary tr:nth-child(even) {
background-color: #ededed;
}
我需要用非常不同的背景颜色(和其他格式)覆盖一些行，并且我希望只向单独的行添加一个class=，但似乎这并没有覆盖上面的CSS。
例如：
<table class="primary">
<tr>
浏览 2提问于2011-11-15得票数 10
回答已采纳
7回答
CSS为表格每行提供不同的颜色
css、colors、html-table
我有一个带有以下CSS格式的表格：
<table cellspacing="2">
<tbody>
<tr>
<th>Name</th>
<th>Area</th>
</tr>
<tr>
<td>${it.conferenc
浏览 2提问于2011-05-27得票数 3
回答已采纳
1回答
使用exception > inherit background color替换行
css、html-table、rows、alternate
我有一个具有交替行背景颜色的表格：
tr:nth-child(even) {background: #FFF}
tr:nth-child(odd) {background: #f4f4f4}
该表由两种类型的单元格".main“和".sub”组成。
我希望背景颜色交替使用".main"，而所有".sub“行都使用前一个".main”行的颜色。
如果解决方案都是CSS就好了，但如果jquery真的是最好的选择，那就开放给jquery吧。
有什么想法吗？
<table>
<tr id='1' class=&#
浏览 0提问于2013-04-18得票数 0
回答已采纳
6回答
多个元素的jQuery奇/偶选择器
jquery、css
我正在使用以下代码在一个页面上剥离几个表格：
$(".events-table tr:even").css("background-color", "#fff");
$(".events-table tr:odd").css("background-color", "#efefef");
这可以很好地工作，但是偶数/奇数间隔应用于页面上的每个表。我希望每一张桌子都有相同的图案。这意味着，对于页面上的每个表，每个表应该在第一行以相同的颜色开始，然后在第二行以相同的颜色开始。
有什么建议吗？
谢
浏览 0提问于2009-10-25得票数 8
2回答
用jquery的addClass方法重写样式表
javascript、jquery、html、css
注意到：添加$.tablesorter.defaults.widgets = ['zebra'];解决了这个问题。
我有一个简单的记录表，它被设计成可替换的行颜色：
inv_style.css
.tr_evn {background-color:#FFFFFF;}
.tr_odd {background-color:#F8F8F8;}
home.html
$(document).ready(function(){
$("#tbl_inv > tbody > tr:odd").addClass("tr_odd");
$
浏览 1提问于2016-02-04得票数 0
回答已采纳
3回答
angular js表奇数列数据问题
angularjs
我是angular JS的新手，在桌子上工作可以改变奇偶的背景颜色，但是我面临着一些挑战。
以下是我的代码
<!DOCTYPE html>
<html>
<style>
table, td {
border: 1px solid grey;
border-collapse: collapse;
padding: 5px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js">
浏览 23提问于2017-06-27得票数 2
回答已采纳
5回答
如何仅选择jQuery中元素的直接子元素
jquery、css-selectors
我正在为样式编写一个带有jQuery的html页面。因此，我有以下几点：
$("table tr:odd td").css({"background-color":"rgb(233,247,255)"});
这使每一排人都变蓝了。但刚才我在其中一个牢房里放了张桌子。发生了什么？好的，它将内表的行处理为外层表中的一行，着色变得混乱(两个连续的蓝色行，而内表中的行是白色的)。
那么，如何在这样的选择器中排除子表呢？有没有人？
编辑：
谢谢你的想法和答案。我想出了这段代码，因为我真正想要的是所有表都有偶数/奇数着色(不仅仅是顶层表)：
$("t
浏览 2提问于2009-10-13得票数 4
回答已采纳
4回答
HTML交替行THBody使用
html、css
我的页面内容区域中有几个html表。这种样式很奇怪，因为它没有在每个表的开头重新开始交替的行颜色，而是在表的列表中执行它。
<table>
<tr>
Blue
</tr>
<tr>
White
</tr>
<tr>
Blue
</tr>
</table>
<table>
<tr>
White
</tr>
<tr>
浏览 6提问于2013-03-26得票数 3
回答已采纳
3回答
每隔一次选择可见的表行
html、css、css-selectors
我有一个显示树结构(超类别和子类别)的表。当用户单击一个超类别时，childs的display属性被切换。
现在我想在每隔一个表格行添加一个交替的背景颜色--当然只考虑那些当前可见的背景颜色。以下是该结构的简化示例：
<table>
<tr data-level="0"><td>Super 1</td></tr>
<tr class="hide" data-level="1"><td>Sub 1</td></tr>
浏览 0提问于2012-03-12得票数 6
回答已采纳
3回答
使用css和html的表格单元格的背景色
html、css
我编写了一个表，我希望它是这样的:偶数行和奇数行具有不同的颜色，第一行和第一列具有相同的颜色；我使用colgroup为第一列着色，但它不起作用。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style type="text/css">
tr.odd{background-color:#f9f;}
浏览 0提问于2015-07-14得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
活动推荐
腾讯云开发者
