如何使用css为表体(Tbody)添加替代颜色？
要为表体（Tbody）添加替代颜色，可以使用CSS中的伪类选择器来实现。以下是一种常见的方法：
- 首先，为表体中的每一行定义两个不同的背景颜色，例如白色和浅灰色。可以使用CSS的nth-child伪类选择器来选择奇数行和偶数行，分别应用不同的背景颜色。
tbody tr:nth-child(odd) {
background-color: #ffffff; /* 白色 */
}
tbody tr:nth-child(even) {
background-color: #f2f2f2; /* 浅灰色 */
}- 将上述CSS代码添加到你的样式表中，或者直接在HTML文件的
<style>标签内添加。
这样，表体中的每一行将交替显示白色和浅灰色的背景颜色，以实现替代颜色效果。
对于腾讯云相关产品和产品介绍链接地址，由于要求不能提及具体品牌商，无法提供相关链接。但腾讯云提供了丰富的云计算服务，包括云服务器、云数据库、云存储等，可以根据具体需求选择适合的产品。
相关·内容
一旦我开始对列进行排序，我的表行背景颜色就会出现问题。当我的文档加载时，代码是这样运行的：
$('tbody tr:even').css('background-color','#F1F1F1');
$('tbody tr:odd').css('background-color','#FFFFF0');
对th进行排序的代码如下：
$('.toggle').toggle(function(){
$(this).css("background-image", &
浏览 0提问于2011-06-24得票数 1
回答已采纳
我想改变第一行的背景色，下面所有的行都是交替色，也就是偶数概念。目前，我正在申请css的替代颜色如下：
.table-striped tbody tr:nth-child(odd) td {
background-color: #81DAF5;
}
.table-striped tbody tr:nth-child(even) td {
background-color: #CEECF5;
}
.table-striped tbody tr.highlight td {
background-color: #F2F5A9;
}
在这里，.table-striped是
浏览 5提问于2015-05-31得票数 2
回答已采纳
我在HTML中有一个表，我正在应用一个CSS类，使用nth-child给出行的交替颜色。然而，有一些行，我希望是相同的颜色。如果我在这些行集周围放置一个tbody，是否有一种方法在CSS中指定使该tbody中的行为相同的颜色，然后继续交替颜色？另一种方法是手动设置行颜色，这似乎有点太麻烦了。
例如：
<table class="alternate-row-colors">
<tr>
<td>Blah blah blah</td>
</tr>
<tbody>
<tr>
浏览 2提问于2015-03-23得票数 0
回答已采纳
2回答
更改响应表的悬停颜色
、、、、
我尝试了一个简单的技巧，改变一个响应表的悬停颜色，但失败了。
我尝试链接CSS，但失败了。
我是否需要添加更多的CSS标签来实现这一点？
你能帮我理解一下我的方法出了什么问题吗？
下面是我的代码：
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://ma
浏览 13提问于2017-08-17得票数 1
回答已采纳
我的html文档中有一个带有css样式的表格。当我在html中对表格行和单元格进行硬编码时，样式可以正常工作。例如，当我将鼠标悬停在一行上时，颜色会发生变化。
问题是，当我通过javascript添加所有表格行和单元格时，悬停效果不再起作用。奇怪的是，如果我保留静态数据，并通过javascript添加数据，样式就会工作得很好。
当我想要通过javascript填充表的所有数据时，我如何才能使样式正确工作？
<table class="table table-striped table-bordered table-hover" id="JobPercentComp
浏览 0提问于2015-11-12得票数 2
7回答
我使用的引导带3，我有一个表显示一些数据。在这个表中，我为条件格式应用了一些javascript，如果满足条件，我将元素的类设置为"red“
.red {
background-color:red;
color:white;
}
HTML元素如下：
<td class="red">0</td>
我现在在奇数行上有一个冲突，文本颜色应用，但是背景颜色被下面的引导css覆盖。
.table-striped > tbody > tr:nth-child(odd) > td,
.table-striped > tbody >
浏览 19提问于2013-11-04得票数 23
回答已采纳
我有一个非常简单的表，它只包含最小的html标记，例如：
<table id="test">
<tr><td>some table cell</td></tr>
</table>
我正在试着检查标签是否存在。奇怪的是: jquery说“是的，有一个tbody标签”，尽管我还没有定义一个！这里发生了什么事？
$('table#test').each(function(){
var tbody = $(this).find('tbody');
//ho
浏览 0提问于2013-08-13得票数 3
回答已采纳
4回答
你好，我在PHP中做表格的样式设计。我只停留在一个点，即，我无法改变表中行的颜色，或者像奇数行一样，应该以白色背景显示，甚至用蓝色显示。我试过下面的css代码，但它不起作用。
tbody:nth-child(2n) { /* even rows */
background-color:#eee;
}
tbody:nth-child(2n+1) { /* odd rows */
background-color:#ccc;
}
浏览 12提问于2012-05-12得票数 1
回答已采纳
2回答
表条纹类没有为我提供可选颜色
、、、、
我希望我的桌子有不同的颜色。但是，在我应用表条带类之后，所有行都变成了灰色。我尝试加载v3和v4引导css文件。但它还是不起作用。
html
<table id="maxDiversificationTable" class="investmentTable table table-striped table-bordered table-hover table-fit" style="margin-top:-55%" >
<thead>
<tr style="
浏览 3提问于2017-08-11得票数 7
我希望在单击表行时更改表行的背景颜色，并将其恢复为单击另一行时的原始颜色。 我尝试了这样的东西： index.js state = {
color: []
}
render(){
return (
<Table>
<thead>
<tr>
<th>name</th>
<th>age</th>
<th>address<
浏览 62提问于2019-04-22得票数 3
回答已采纳
我有以下HTML表：
<div class="table">
<table id="carTable">
<tbody>
<tr>
<th>Car Number</th>
<th>owner</th>
</tr>
<!--
浏览 0提问于2020-02-06得票数 1
回答已采纳
5回答
我在试着改变鞋带表的边框颜色。
<table class="table">
<thead>
<tr>
<td>Parent</td>
</tr>
</thead>
<tbody>
<tr>
<td>Mama</td>
</tr>
</tbody>
</table>
CSS我试过了
table > tr{
border-top: b
浏览 0提问于2018-02-01得票数 1
回答已采纳
1回答
引导4表悬停颜色
、、
我正在努力更改Bootstrap 4.1表中的悬停颜色，使用砂岩主题，我的当前代码不影响悬停行的颜色：
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootswatch/4.1.0/sandstone/bootstrap.min.css" rel="stylesheet" >
<style type="text/css">
table.table-hover tbody tr.table-active td {
浏览 0提问于2018-04-14得票数 0
回答已采纳
我对CSS很在行，但在jQuery方面我做得很差。我们都有自己的局限..。
好了，承认了，我就开始吧。我们有一个“最喜欢的产品”表，你可以把它分成不同的类别(例如，烈性酒，绵羊，汤匙)。每个类别都是一个。每一行(不包括)都是一个产品。
我想让用户能够拖放(重新排序)表行，即使是在to之间。我看过jQuery的插件，但很失望地发现它并不真正支持主体之间的拖动-而且已经有很长一段时间没有更新了。
下面是基本的表结构：
<table>
<thead>
<tr>
<th>Favourite</th>
</
浏览 0提问于2010-07-27得票数 1
1回答
如何更改p-table的边框颜色？我能够更改表标题边框的颜色，但我不知道如何更改p表主体的颜色。
body .ui-table .ui-table-tbody > tr > td { padding: 0.571em 0.857em; border: #e3e3e3; }
我已经在theme.css中尝试过这一点，在resources/theme.css中使用了primeng，但是它仍然没有用。
浏览 4提问于2020-07-17得票数 0
3回答
我有一张桌子在一个自带模式内：
...modal container...
<div class="modal-body">
...extra code...
<div class="form-group">
<table class="table table-hover table-bordered" id="co-page-orderlist" style="di
浏览 2提问于2017-07-21得票数 0
回答已采纳
我在表中有一个span元素。我希望根据该值动态地更改css类。 下面是我的html代码： <table>
<thead>
<tr>
<th>Fruits</th>
<th>Colors</th>
</tr>
</thead>
<tbody>
<tr *
浏览 55提问于2018-07-31得票数 1
回答已采纳
当所有表格单元格都在class="p1“的表中时，我想用背景颜色:蓝色对它们进行样式化。以下工作很有效，但很长：
table.p1 > tbody > tr > td,
table.p1 > thead > tr > td,
table.p1 > tbody > tr > th,
table.p1 > thead > tr > th{
background-color:blue;
}
是否有一种更短/更优雅的方法来定义这个CSS规则？
编辑:只有表"p1“所包含的表单元格才可能被样式化，并且不再有子
浏览 3提问于2017-05-01得票数 2
回答已采纳
这是一个奇怪的问题。我正在尝试为不支持CSS伪类的旧版本IE复制:last-child。
如果您查看以下代码，则背景颜色更改有效，但页边距不起作用。单元格内的div (.inner)当前的边距为3px，但是边距覆盖没有发生。我知道jQuery可以遍历到div，因为背景颜色的改变起作用了。这只是IE6和IE7的问题。有谁有建议吗？非常感谢。
$J('table tbody tr td .inner:last').css({ 'margin-right':'0px', 'background':'red' });
如果
浏览 2提问于2011-04-30得票数 0
2回答
我有一个用AngularJS生成的表。
这是我的HTML：
<table class="my_table">
<thead>
<tr>
<th>Name</th>
<th>Address</th>
<th>Celphone</th>
</tr>
</thead>
<tbody>
<tr
浏览 1提问于2018-05-23得票数 6
回答已采纳
2回答
我正在尝试使用查询来设置html表的交替行的颜色。但每次添加新行时，查询都会切换整个表的颜色。下面是我使用的Javascript代码：
var alternate = true;
function addRow(data) {
if(alternate){
$("table.live_feed").find('tbody.main').prepend(data).css("background", "#f1f1f1");
alternate = false;
}else{
浏览 0提问于2011-05-13得票数 2
回答已采纳
我有一张列有交替颜色的桌子。在表行上也有悬停效应。在Windows 8下的IE10 (以及IE9模式下也是如此)，即使鼠标离开，悬停也经常保持不变。
在这里，演示(简单地将指针从上到下拖到表的上方)：
删除规则，使行的颜色交替，解决了这个问题。
是窃听器还是我做错了什么？
CSS来源：
/*
* Alternating colors for rows.
*/
.table tbody tr:nth-child(odd) {
background-color: #DDDDDD;
}
.table tbody tr:nth-child(even) {
background-colo
浏览 1提问于2013-01-04得票数 2
回答已采纳
每次单击表外的按钮时，我都希望为选定的行设置不同的颜色。我用的是最新版的“角质”。
我知道如何用css设置行颜色，但不知道如何在类型记录中以编程方式影响css类。
.ui-table .ui-table-tbody > tr:nth-child(1) {
background-color: #2DA449;
}
是否有方法编辑css类以设置类型记录中的子索引和b颜色？
浏览 0提问于2018-02-20得票数 0
回答已采纳
3回答
我正在尝试替换表格行的背景颜色，每个部分都以相同的颜色开始。我用下面的代码实现了这一点：
$(document).ready(function(){ $("tbody tr.row:nth-child(even)").css("background", "#efefef"); });
我还需要能够限制每个tbody部分中可见的行数(例如5行)。它们需要能够通过带有.click()事件的按钮进行切换。有人知道我是怎么做到这一点的吗？我想出的唯一的解决方案导致背景颜色中断。任何帮助都将不胜感激！
下面是表结构的一个示例：
<table>
浏览 3提问于2009-08-18得票数 4
回答已采纳
默认情况下，Blueprint CSS Framework 1.0.1设置所有交替颜色的表行。screen.css中的代码行是：
tbody tr:nth-child(even) td, tbody tr.even td {background:#e5ecf9;}
那很好。
但是我需要使用eric martin的简单模式jquery插件来禁用div (内部)模式窗口中的一个表的这种行为，我只是尝试使用以下命令覆盖css：
#contact-container tbody tr:nth-child(even) td, tbody tr.even td {background:#FFFFCC;}
浏览 1提问于2012-02-10得票数 0
1回答
动态显示表行和CSS奇/偶匹配
、、、、
我有一个带有.table-striped类的经典引导html表--它意味着斑马条纹(每个偶数行都有不同于奇数的颜色)。
在同一站点上是过滤器，它显示或隐藏此表中的行(它取决于填充的输入)
因此，从具有如下行的表中：
我得到的行是这样的：
我该如何解决这个问题？有什么CSS方法可以做到这一点吗？我可以看到用jquery迭代每一行的解决方案，并改变背景颜色，但在我看来这是一个肮脏的解决方案。
编辑：
bootstrap中的CSS表示：
.table-striped>tbody>tr:nth-of-type(odd) {
background-color: #
浏览 2提问于2018-03-06得票数 0
2回答
因此，让我们跳过表头到我的表体。我有一个填充的表： HTML： <tbody>
<tr *ngFor="let e of emails; let i = index">
<td <input type="checkbox" id="email-checkbox" (change)="addToSelectedList($event, e)"></input></td>
<td id="subject-{{i}}">{{
浏览 42提问于2020-01-17得票数 1
回答已采纳
3回答
当表格标题的属性为commit="123“时，我想要更改整个表格行的颜色(使用CSS)。我试过了：
[commit="123"] {
color:#aaffff;
background-color:#111111;
}
但是，这只会更改表头(1)。如何选择表头commit设置为"123“的整个表行(1项1)？谢谢!
[commit="123"] {
color: #aaffff;
background-color: #111111;
}
<table class="code">
<tbod
浏览 0提问于2020-03-07得票数 1
我使用的是jQuery数据表，我希望背景颜色根据条件的变化悬停在排序的行没有我的背景颜色，如您在我的图像上所看到的那样。 ? 这是我的情况 "rowCallback": function (row, data, index) {
if (data.componente.default_ubicacion.ubicacion_id === 0) {
$(row).css("background-color", "rgb(225, 27, 27, 100%)");
浏览 18提问于2020-07-22得票数 1
回答已采纳
我有一个动态表，最后一列是可点击的图标。当我单击该图标时，将在该图标所在的行下显示另一个表。这个功能在我的代码中运行得很好。但是，在我单击图标后，行并没有像css类“table-striped”那样的替代颜色。单击之后，所有行都会获得相同的颜色。我该怎么做才能使表行的css成为' table -striped‘
<table class="table table-hover table-striped" *ngIf="datas && datas.length">
<thead>
<tr>
浏览 3提问于2017-04-03得票数 1
我想将背景颜色应用到COLGROUP，但仅在表的TBODY内。给出一个结构如下的典型日程表：
<table>
<colgroup class="weekdays" span="5"/>
<colgroup class="weekend" span="2"/>
<thead>
<tr>
<td/><td/><td/><td/><td/>
<!-- I'd
浏览 1提问于2009-11-16得票数 14
回答已采纳
5回答
我正在使用jQuery更改表中偶数行的background-color：
$("table tbody tr:nth-child(even)").css("background-color", "#F1F1F1");
现在我想根据一些tr任务的结果给我的PHP设置另一种颜色。
<tr
<?php
// Some tasks to see whether background-color should change or not
if (yes) echo "style='back
浏览 2提问于2011-10-19得票数 1
回答已采纳
我有一个半径为50%，等高等宽的div。它的边框颜色与父元素的背景颜色相同。在这个边框之外，有一个细小的div背景颜色轮廓，看起来有点像抗锯齿。
这一切为什么要发生？它似乎存在于所有版本的IE中。
CodePen：
<body>
<div id="inner"></div>
</body>
和CSS：
#inner {
border-radius: 50%;
border: 40px solid white;
background: red;
width: 20rem;
heig
浏览 5提问于2015-08-04得票数 2
因此，我现在正在使用Scrapy，并希望刮一个具体的信息网站。我只想在某些文本存在的情况下才能刮取信息，也只想在某些文本不存在的情况下刮取信息。
例如，我可能会寻找苹果，香蕉或梨，并希望刮页，如果我发现其中一个词在场，但如果桃子也在文本中，我不想刮内容。我希望这有意义？
据我所知，我可以使用xpath创建这样的or语句：
//tbody[contains(text(), "apple")] | //tbody[contains(text(), "banana")] | //tbody[contains(text(), "pear")]
但是，如果
浏览 2提问于2016-01-25得票数 1
回答已采纳
3回答
如何在laravel表格中应用替代行颜色CSS。我想要显示表格行的替代颜色。我已经把gridview cssclass放在表中了。我想对偶数行计数应用.gridview tr.even td，即具有2的倍数的行。
我的CSS文件
.gridview {
font-family: "arial";
background-color: #FFFFFF;
width: 100%;
font-size: small;
}
.gridview th {
background: #0CA3D2;
padding: 5
浏览 32提问于2018-07-30得票数 1
回答已采纳
3回答
我对Bootstrap和CSS很陌生，并且对表的着色有一些问题。我有一个这样的表，其中有一些具有类警告的行：
<table class="table table-bordered grocery-crud-table table-hover">
<thead>
<tbody>
<tr class="warning">
<tr>
<tr>
</tbody>
</table>
如何使用警告类更改行的颜色？我试过以下几种方法，但不起作用。
.warning {
浏览 4提问于2016-08-01得票数 2
回答已采纳
3回答
<div class="wrapper">
<div class="profile">
<div id='entrydata'></div>
</div>
</div>
Javascript
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"><
浏览 8提问于2015-05-14得票数 0
回答已采纳
我正在使用这个css代码来改变每一个奇数/偶数tr bg颜色
tbody tr:nth-child(odd){background-color: #b2b2b2;}
tbody tr:nth-child(even){background-color:black;}
但我正在过滤表数据，根据条件，一些TR将被隐藏。因此，如果为style="display: none;"，则仅对可见TR应用奇/偶规则。否则它看起来就像是附加的图像
浏览 1提问于2020-12-08得票数 0
我有一个行的表格，当点击的时候会“展开”(通过在点击的行后插入一个新的行)，我使用css来斑马样式行中的单元格，以及当一行悬停在上面时单元格的‘高亮’样式。
我希望插入的行与单击的行具有相同的背景颜色。
我尝试使用单击行中第一个单元格的backgroundColor属性，用jQuery设置插入行的单元格的backgroundColor。
然而，当我这样做时，我得到了“突出显示”的颜色，因为我将鼠标悬停在单击的行上-我想要非悬停的值。
css：
.zebra-striped tbody tr:nth-child(odd) td {
background-color: #f9f9f9;
}
浏览 1提问于2011-12-16得票数 1
2回答
假设我有下面的表，它可以用于引导css和剔除：
<table style="cursor:pointer;" class="table table-striped table-bordered table-hover table-condensed">
<tbody data-bind="foreach: items">
<tr>
<td data-bind="text: name"></td>
<
浏览 6提问于2014-06-11得票数 4
回答已采纳
我想知道怎样才能使表中的所有行都具有相同的宽度？正如你在页面中看到的……我想改变页眉的背景颜色，但是页眉的宽度与正文中的元素不同。如何才能使所有行的宽度都相同，这样背景颜色才能覆盖整个宽度？谢谢!
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery.min.js"></script>
<link href="http://twitter.github.io/bootstrap/assets/css/bootst
浏览 0提问于2013-05-14得票数 0
回答已采纳
请原谅我对CSS的无知。
我试图使用以下css将背景色应用于一行：
tbody tr:hover {
background-color: #F69;
border: thin solid black;
}
HTML表有一些固有的列颜色，如下所示。上面的CSS不会将颜色更改为#F69并保留颜色#993300。有办法覆盖这个HTML单元格着色吗？
tbody tr:hover {
background-color: #F69;
border: thin solid black;
}
<table>
<tr>
<th>11
浏览 4提问于2015-10-26得票数 0
回答已采纳
1回答
我有一个表，它从DS模型中获取数据，该模型从数据库中动态更新。我需要警告颜色(css)的块(特别是“td”)在UI中，当数据更新在表中。
这是我的代码：
<table class="table table-bordered table-hover">
<thead>
<tr>
<th>C</th>
<th>Flight</th>
</tr>
</thea
浏览 0提问于2017-09-28得票数 0
回答已采纳
我使用<tbody>作为CSS选择器来设置表中的background-color。之所以这样做，是因为表中有多个<tbody>部分，它们有不同的背景色。
我的问题是，当在单元格上使用border-radius时，单元格不尊重tbody的background-color。也就是说，边框半径在默认背景颜色(在本例中为白色)中，而不是tbody颜色(在本例中为绿色)下切割角。
更新:这个问题发生在Chrome/Safari中，但在Firefox中却不是这样(我只是在所有3台浏览器上测试了自己)。仍在寻找解决办法的Chrome (找到！见接受的答复)。
tr:first-c
浏览 4提问于2016-01-15得票数 8
回答已采纳
1回答
我正在使用bootstrap，并有一个带有" table“属性的表，以使数据库中显示的数据具有较亮的背景。它看起来很好，除了当我向每一行添加一个按钮时，这应该是为了帮助我编辑该行中的数据。按钮本身变成白色，几乎看不见，但如果我删除"table“属性，数据将不能正确显示。 如何仅忽略按钮元素中的“-property”表？在.btn-css中设置按钮的颜色没有帮助。 下面是HTML代码： <table class="table cons-table table-striped border">
<thead>
浏览 19提问于2021-05-04得票数 0
3回答
当在表中创建表格和边框颜色时，我在单元格填充方面遇到了一些问题。不确定是否有其他与表相关的CSS正在覆盖单元格填充，我正在尝试给出一个新表。
对于如何在表中获得正确的单元格填充和边框颜色，有什么建议吗？
这是我试图复制的表的屏幕截图：
这是我创建的表的屏幕截图。
下面是CSS和表HTML：
table, td, th {
border: 1px solid black;
height: 30px !important;
display: table-cell;
vertical-align: middle;
}
table {
border-top-w
浏览 7提问于2022-05-17得票数 0
回答已采纳
1回答
有一些问题，使用Vue将数组数据打印到表中。有人能帮我解析使用vue的值并将它们放在一个表中吗？见图像下面的代码。如果没有2的数组，它将工作，但我不知道如何在响应是多个的情况下。
这是我应得的职责
//HTML代码
<tbody>
<tr v-for="(input, index) in inputs">
<th>((input.id))</th>
<th>((input.tracking_number))</th>
浏览 5提问于2017-09-08得票数 3
回答已采纳
1回答
我有一个html字符串，我希望使用jquery将其作为行添加到表中，并且我还希望将这一新添加行的背景颜色更改为红色。这是我目前得到的结果，只需添加不带背景颜色的行：
$(outputString).appendTo('#billTable tbody').hide().fadeIn(2000);
但是当我尝试使用下面的代码时，我得到了一个错误，说“未捕获语法错误，意外字符串”：
$(outputString).appendTo('#billTable tbody').css({"background-
color":"red"})
浏览 0提问于2013-03-07得票数 0
回答已采纳
1回答
我有四个目标：
将formattingInclude与连接到Postgresql数据库，并拉出一些数据，在其上方绘制一张带有某种颜色的表，并在导出为PDF的上方添加图像(公司徽标)
1和2是足够容易的，4似乎是可能的，即使不方便，但我不认为R是设计来添加和定位图像。我附上了一些示例代码，说明我设想如何创建表，然后是我认为最终版本可能是什么样子的模型。有人能建议怎样才能做到这一点吗？
样本数据：
data(mtcars)
df <- head(mtcars)
HTML方法:灵活且可移植到其他应用程序
library(tableHTML)
html_table <- df %>%
浏览 11提问于2022-07-29得票数 2
我有一个dataTable，在表的一列中，我显示了一个布尔值。我想根据这个布尔值改变td的背景颜色；当它是真的时候是绿色的，当它是假的时候是红色的。这是我的html。
<table id="myTable" class="table table-striped m-b-none" data-ride="datatables">
<thead>
<tr>
浏览 5提问于2016-08-19得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
