logo标签列表

使用CSS交替表格行颜色？

htmlcsshtml-table
555

我在使用一个带有交替行颜色的表格，并且是通过这种方式实现的。

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>

我在这里使用class来控制 tr，但是我只想用它来控制 table。当我对 table 使用class 时，这将应用于 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如何使表格行具有“斑马线”效果？

1
我已经创建了一个演示，使用了所有可能的nth-child（）模式 - http://xengravity.com/demo/nth-child/ - xengravity
11个回答
826

$(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");
});
有没有可能同时更改交替行的超链接颜色。我想让偶数行和奇数行的超链接颜色不同。谢谢。 - عثمان غني
4
好的回答！但是仅供参考，还有另一个可以使用的 CSS 选择器，即 tr:nth-of-type(odd/even)。 - Nikhil Nanjappa
2
@عثمانغني：是的，您只需执行 tr:nth-child(even) a。 - Gerard
1
如果您动态编写HTML，则无法正常工作。然后，您需要向行添加类。 - erik
6
2019年：这不再是最佳方案。请使用纯CSS。 - Chiramisu
243

你可以使用 :nth-child() 伪类：

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

在早期的:nth-child()时期，它在浏览器的支持方面比较差。这就是为什么设置class="odd"成为一种常见技术的原因。2013年后期，我很高兴地说，IE6和IE7终于消失了（或者已经病入膏肓不再重要），但IE8还存在——幸运的是，这是唯一的例外。

5
首选答案不会将 CSS 应用于页眉。 - Mike
嗨，这可能晚了几年，但是当单击表格行时，使用jqeury添加带有背景颜色的选定类别如何？我注意到，当您使用jqeury添加“selected”类别时，:nth-child伪类别的背景颜色会被覆盖。 - dutchkillsg
@dutchkillsg 看起来这似乎是一个全新的问题，而不是对我的回答的评论... - Álvaro González
1
对于“斑马线”（即垂直），只需将 tr:nth-child(odd) 替换为 td:nth-of-type(odd)。请注意，在这种情况下，您正在将不同的伪类应用于 td 元素而不是 tr 元素。 - Chiramisu
在这里，您可以找到有关此主题的简短而清晰的解释：https://www.w3.org/Style/Examples/007/evenodd.en.html - peter70
49
<在你的HTML代码中（在<head>标签内），添加以下内容即可完成。>
<style>
      tr:nth-of-type(odd) {
      background-color:#ccc;
    }
</style>

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

3
这应该是被接受的答案。尽可能地，CSS 应该处理样式方面的事情，而 JavaScript 可以用来处理其他事情。 - Tormod Haugene
我没有每天做HTML。对我来说，“＃ccc”似乎不是有效的颜色代码。你能解释一下吗？谢谢。 - tommy.carstensen
2
@tommy.carstensen 这被称为“简写十六进制形式”。基本上，#ccc会扩展成#cccccc，这意味着每个RGB颜色都具有十六进制值cc或十进制值204（即 rgb（204,204,204）） 。在此处阅读更多信息-> https://en.wikipedia.org/wiki/Web_colors#Shorthand_hexadecimal_form - Nick Grealy
15
我们可以使用奇偶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>

14

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

是的，你可以这样做，但是然后你将不得不使用 :nth-child() 伪选择器（尽管它的支持有限）：

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

大多数上述代码在IE版本中不起作用。适用于IE +其他浏览器的解决方案是这个。

   <style type="text/css">
      tr:nth-child(2n) {
             background-color: #FFEBCD;
        }
</style>
9
<script type="text/javascript">
$(function(){
  $("table.alternate_color tr:even").addClass("d0");
   $("table.alternate_color tr:odd").addClass("d1");
});
</script>
48
好的，我知道jQuery在这个网站上非常普遍，但是无论如何，您都不应该没有解释地发布jQuery。这个脚本不能自己运行。 - DisgruntledGoat
4
你可以使用nth-child(odd/even)选择器，但并非所有浏览器（ie 6-8, ff v3.0）都支持这些规则，因此大多数解决方案都会回退到某种形式的JavaScript / jQuery解决方案，以添加类到这些不符合标准的浏览器的行，以获得斑马条纹效果。
3

如果我理解你的问题正确，你使用PHP编码并使用CSS和JavaScript增强输出。对于这个问题，在PHP中有一种相当简单的方法。

数据库中的动态输出将包含一个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 并不确定。 - Kali Charan Rajput
1

交替行选择器

以下是它的工作原理，以及您可以如何使用模数在几个不同颜色的行之间交替（这里是3）：

ol>li:nth-child(3n+1) {
  background-color: blue;
}

ol>li:nth-child(3n+2) {
  background-color: green;
}

/* The following selector is equivalent to "nth-child(3n)" */
ol>li:nth-child(3n+3) {
  background-color: red;
}
<ol>
  <li />
  <li />
  <li />
  <li />
  <li />
  <li />
  <li />
  <li />
  <li />
</ol>

正如已经说明的那样，选择器中使用的行索引从1开始（而不是0）。这就是为什么第1、4、7行的选择器是nth-child(3n+1)。

选择器的读法

对于索引为i的行，选择器nth-child(Mn+k)的读法为if (i % M == k)。例如，如果我们想选择所有基数为3模数等于2的行，则在CSS中编写nth-child(3n+2)，换句话说，选择器执行以下操作（使用JavaScript）：

const M = 3;
const k = 2;

for (let i = 1; i < 10; i+=1){
    // The `nth-child(Mn+k)` selector: 
    if (i % M == k){
        console.log(`${i} selected`);
    }
}

输出

2 selected
5 selected
8 selected
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接