使用CSS替换表格行颜色？答案

【问题标题】：Alternate table row color using CSS?使用CSS替换表格行颜色？
【发布时间】：2011-03-06 06:48:59
【问题描述】：

我正在使用具有交替行颜色的表格。

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>Two</td>
    <td>two</td>
  </tr>
</table>

这里我使用tr 的类，但我只想使用table。当我使用表格类时，这适用于tr 替代方案。

我可以使用 CSS 编写这样的 HTML 吗？

<table class="alternate_color">
    <tr><td>One</td><td>one</td></tr>
    <tr><td>Two</td><td>two</td></tr>
    </table>

如何使用 CSS 使行具有“斑马条纹”？

【问题讨论】：

我使用所有可能的模式为 nth-child() 创建了一个演示 - xengravity.com/demo/nth-child

标签： html css html-table

【解决方案1】：

$(document).ready(function()
{
  $("tr:odd").css({
    "background-color":"#000",
    "color":"#fff"});
});

tbody td{
  padding: 30px;
}

tbody tr:nth-child(odd){
  background-color: #4C8BF5;
  color: #fff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1">
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
<tr>
<td>9</td>
<td>10</td>
<td>11</td>
<td>13</td>
</tr>
</tbody>
</table>

有一个 CSS 选择器，实际上是一个伪选择器，称为 nth-child。在纯 CSS 中，您可以执行以下操作：

tr:nth-child(even)
    background-color: #000000;
}

注意： IE 8 不支持。

或者，如果你有 jQuery：

$(document).ready(function()
{
    $("tr:even").css("background-color", "#000000");
});

【讨论】：

是否也可以更改交替行的超链接颜色。我想要偶数行和奇数行不同的超链接颜色。谢谢
很好的答案！但仅供参考，还有另一个 CSS 选择器可以使用，即。 tr:nth-of-type(odd/even)
@عثمانغني : 是的，你会做tr:nth-child(even) a
如果您动态编写 html，则不起作用。然后你需要在行中添加类。
2019 年：这不再是最佳解决方案。使用pure CSS。

【解决方案2】：

你有 :nth-child() 伪类：

table tr:nth-child(odd) td{
    ...
}
table tr:nth-child(even) td{
    ...
}

在:nth-child() 的早期，它的browser support 有点穷。这就是为什么设置class="odd" 成为如此普遍的技术。在 2013 年末，我很高兴地说 IE6 和 IE7 终于死了（或者病得足以停止关心），但 IE8 仍然存在 — 谢天谢地，它是唯一的例外。

【讨论】：

首选答案，因为它不将 CSS 应用于标题
您好，这已经晚了几年，但是单击时将带有 jqeury 的 bg-color 的选定类添加到表行怎么样。我注意到当您使用 jqeury 添加“选定”类时， :nth-child 伪类 bg-color 会覆盖
@dutchkillsg 这似乎是brand new question，而不是对我的回答的评论......
对于“斑马条纹”（即垂直），只需将tr:nth-child(odd) 与td:nth-of-type(odd) 交换即可。请注意，在这种情况下，您将不同的伪类应用于 td 而不是 tr 元素。

【解决方案3】：

只需将以下内容添加到您的 html 代码中（使用 <head>）即可完成。

HTML：

<style>
      tr:nth-of-type(odd) {
      background-color:#ccc;
    }
</style>

比 jQuery 示例更简单、更快捷。

【讨论】：

这应该是公认的答案。 CSS 尽可能的处理样式，而 javascript 可以用来处理其他的事情。
我不是每天都做 html。 #ccc 对我来说似乎不是一个有效的颜色代码。你可以解释吗？谢谢。
@tommy.carstensen 它被称为“十六进制速记形式”。基本上#ccc 会扩展为#cccccc，这意味着每种RGB 颜色都有十六进制值cc，或十进制值204（即rgb(204, 204, 204)）。在此处阅读更多信息 -> en.wikipedia.org/wiki/Web_colors#Shorthand_hexadecimal_form

【解决方案4】：

我可以这样写我的html吗？ css ?

是的，你可以，但是你必须使用 :nth-child() 伪选择器（虽然支持有限）：

table.alternate_color tr:nth-child(odd) td{
    /* styles here */
}
table.alternate_color tr:nth-child(even) td{
   /* styles here */
}

【讨论】：

【解决方案5】：

我们可以使用奇偶 CSS 规则和 jQuery 方法来替换行颜色

使用 CSS

table tr:nth-child(odd) td{
           background:#ccc;
}
table tr:nth-child(even) td{
            background:#fff;
}

使用 jQuery

$(document).ready(function()
{
  $("table tr:odd").css("background", "#ccc");
  $("table tr:even").css("background", "#fff");
});

table tr:nth-child(odd) td{
           background:#ccc;
}
table tr:nth-child(even) td{
            background:#fff;
}

<table>
  <tr>
    <td>One</td>
    <td>one</td>
   </tr>
  <tr>
    <td>Two</td>
    <td>two</td>
  </tr>
</table>

【讨论】：

【解决方案6】：

以上代码大部分不适用于 IE 版本。适用于 IE+ 其他浏览器的解决方案是这样的。

   <style type="text/css">
      tr:nth-child(2n) {
             background-color: #FFEBCD;
        }
</style>

【讨论】：

【解决方案7】：

<script type="text/javascript">
$(function(){
  $("table.alternate_color tr:even").addClass("d0");
   $("table.alternate_color tr:odd").addClass("d1");
});
</script>

【讨论】：

好吧，我知道 jQuery 在这个网站上相当普遍，但无论如何你不应该在没有解释的情况下发布 jQuery。此脚本无法单独运行。

【解决方案8】：

您可以使用 nth-child(odd/even) 选择器，但并非所有浏览器 (ie 6-8, ff v3.0) 都支持这些规则，因此为什么大多数解决方案会退回到某种形式的 javascript/jquery 解决方案来将类添加到这些行中不兼容的浏览器获得虎纹效果。

【讨论】：

【解决方案9】：

在 PHP 中有一个相当简单的方法可以做到这一点，如果我理解您的查询，我假设您使用 PHP 进行编码并且您正在使用 CSS 和 javascript 来增强输出。

数据库的动态输出将携带一个 for 循环来遍历结果，然后将其加载到表中。只需像这样添加一个函数调用：

echo "<tr style=".getbgc($i).">";  //this calls the function based on the iteration of the for loop.

然后将函数添加到页面或库文件中：

function getbgc($trcount)
{

$blue="\"background-color: #EEFAF6;\"";
$green="\"background-color: #D4F7EB;\"";
$odd=$trcount%2;
    if($odd==1){return $blue;}
    else{return $green;}

}

现在这将在每个新生成的表格行的颜色之间动态交替。

这比搞乱在所有浏览器上都不起作用的 CSS 要容易得多。

希望这会有所帮助。

【讨论】：

感谢@mark。网站将使用 PHP、.net 或简单的 HTML 格式并不固定。

【解决方案10】：

请尝试这种方式：它可以在 WebView

的 Html 文件中使用

<head>
    
    <style>
        table {
            border-collapse: collapse;
            width: 100%;
        }
          
        th, td {
            text-align: left;
            padding: 8px;
        }
          
        tr:nth-child(even) {
            background-color: Lightgreen;
        }
    </style>
</head>

【讨论】：