Bootstrap 表条纹：如何更改条纹背景颜色？

Posted 2023-03-05

【中文标题】Bootstrap 表条纹：如何更改条纹背景颜色？

【英文标题】：Bootstrap table striped: How do I change the stripe background colour?

【发布时间】：2014-01-16 11:49:44

【问题描述】：

使用 Bootstrap 类 table-striped，我表中的每一行的背景颜色都等于 #F9F9F9。我怎样才能改变这种颜色？

【参考方案1】：

加载Bootstrap后添加如下CSS样式：

.table-striped>tbody>tr:nth-child(odd)>td, 
.table-striped>tbody>tr:nth-child(odd)>th 
   background-color: red; // Choose your own color here
 

【讨论】：

在覆盖默认引导表颜色方面效果很好。谢谢。

这会禁用偶数行上的“table-hover”类...有解决办法吗？

【参考方案2】：

.table-striped > tbody > tr:nth-child(2n+1) > td, .table-striped > tbody > tr:nth-child(2n+1) > th 
   background-color: red;

在 bootstrap.css 中更改这一行 或者您可以使用 (odd) 或 (even) 代替 (2n+1)

【讨论】：

不要这样做。下次升级引导程序时，您将失去自定义覆盖。将自定义 css 放在单独的文件中会更好，您可以直接将其放在 bootstrap.css 之后。

如何更改背景颜色以将整行悬停在这里？

这个页面解释了如何实现悬停 [***.com/questions/15643037/…

这是我需要的答案，但是，我将它添加到单独的 CSS 文件中，而不是实际的 Bootstrap CSS。它是级联的，所以如果我在引导程序之后添加它并且它可以完美地工作并将其排除在主引导程序之外。另外，我不必携带自己修改过的引导程序，而是只需将我的 css 添加到每个需要它的项目中。

切勿直接更改任何第三方库。绝不！只需覆盖您自己的 css 文件中的样式即可。

【参考方案3】：

如果你使用的是 Bootstrap 3，你可以使用 Florin 的方法，或者使用自定义的 CSS 文件。

如果你使用 Bootstrap 少的源而不是处理过的 css 文件，你可以直接在bootstrap/less/variables.less 中进行更改。

找到类似的东西：

//** Background color used for `.table-striped`.
@table-bg-accent:               #f9f9f9;

【参考方案4】：

您有两个选择，要么使用自定义样式表覆盖样式，要么编辑主引导 css 文件。我更喜欢前者。

您的自定义样式应在引导后链接。

<link rel="stylesheet" src="bootstrap.css">
<link rel="stylesheet" src="custom.css">

在custom.css

.table-striped>tr:nth-child(odd)
   background-color:red;

【讨论】：

对我不起作用。 kyriakos 的回答非常有效。

这个例子缺少 tbody 标签

> 表示直接子级，所以如果 table 和 tr 之间有 tbody 标签，它就不起作用。但只要去掉 >，它对指定表下的所有 tr 都有效，无论它们是否是直接子级。

【参考方案5】：

删除表条带 它覆盖了您更改行颜色的尝试。

然后执行此操作 在css中

   tr:nth-child(odd) 
    background-color: lightskyblue;
    

   tr:nth-child(even) 
    background-color: lightpink;
    

    th 
       background-color: lightseagreen;
    

【参考方案6】：

使用 Bootstrap 4，bootstrap.css 中 .table-striped 的负责 css 配置是：

.table-striped tbody tr:nth-of-type(odd) 
  background-color: rgba(0, 0, 0, 0.05);

对于一个非常简单的解决方案，我只是将它复制到我的custom.css 文件中，并更改了background-color 的值，所以现在我有一个更漂亮的浅蓝色阴影：

.table-striped tbody tr:nth-of-type(odd) 
  background-color:  rgba(72, 113, 248, 0.068);

【参考方案7】：

.table-striped>tbody>tr:nth-child(odd)>td,
.table-striped>tbody>tr:nth-child(odd)>th 
  background-color: #e08283;
  color: white;

.table-striped>tbody>tr:nth-child(even)>td,
.table-striped>tbody>tr:nth-child(even)>th 
  background-color: #ECEFF1;
  color: white;

使用“偶数”更改偶数行的颜色，使用“奇数”更改奇数行的颜色。

【讨论】：

这禁用了bootstrap的table-hover类，有办法同时使用吗？

【参考方案8】：

改变条纹顺序的最简单方法：

在您的表格 tr 标记之前添加 empty tr。

【参考方案9】：

我发现这种棋盘格图案（作为斑马条纹的子集）是一种显示两列表格的好方法。这是使用 LESS CSS 编写的，并且所有颜色都与基色不同。

@base-color: #0000ff;
@row-color: lighten(@base-color, 40%);    
@other-row: darken(@row-color, 10%);

tbody 
    td:nth-child(odd)  width: 45%; 
    tr:nth-child(odd) > td:nth-child(odd) 
        background: darken(@row-color, 0%); 
    tr:nth-child(odd) > td:nth-child(even) 
        background: darken(@row-color, 7%); 
    tr:nth-child(even) > td:nth-child(odd) 
        background: darken(@other-row, 0%); 
    tr:nth-child(even) > td:nth-child(even) 
        background: darken(@other-row, 7%); 

请注意，我已删除 .table-striped，但似乎无关紧要。

看起来像：

【参考方案10】：

不要通过直接编辑引导 CSS 文件来自定义引导 CSS。相反，我建议复制粘贴引导 CSS 并将它们保存在不同的 CSS 文件夹中，您可以在那里自定义或编辑适合您需要的样式。

【参考方案11】：

如果使用 SASS 和 Bootstrap 4，您可以更改 .table 和 .table-dark 的交替背景行颜色：

$table-accent-bg: #990000;
$table-dark-accent-bg: #990000;

【参考方案12】：

如果你想真正反转颜色，你应该添加一个规则，让“奇数”行变成白色，同时让“偶数”行变成你想要的任何颜色。

【参考方案13】：

我在为自己寻找解决方案时遇到了这篇文章。通过使用 chrome 的检查器，我能够确定条纹颜色是从 --bs-table-striped-color 标签应用的。

在你的 css 中覆盖该标签：

<style scoped>
table 
--bs-table-striped-color: #85d1ee;

</style>

【参考方案14】：

我知道这是一篇旧帖子，但更改 th 或 td 颜色不是正确的方法。我也被这个帖子骗了。

首先加载您的 bootstrap.css 并将其添加到您自己的 css 中。 这样，如果你有一个悬停的表格，它只有 2 行，否则它只有 1 行，除非你想改变奇数和偶数:-)

.table-striped>tbody>tr:nth-child(odd) 
    background-color: LemonChiffon;

.table-hover tbody tr:hover 
    background-color: AliceBlue;

【参考方案15】：

引导 5 使用 --#$variable-prefixtable-accent-bg

考虑

.table-striped>tbody>tr:nth-child(odd) > td:hover 
--#$variable-prefixtable-accent-bg:  #000099;