使用CSS的替代表格行颜色？

462

我正在使用具有备用行颜色的表。

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。当我将类用于表时，这适用于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使行具有“斑马条纹”？

html css html-table

— 卡利（Kali Charan）Rajput
source

1

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

— xengravity 2015年

760

$(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");
});

— 罗素·迪亚斯（Russell Dias）
source

是否还可以更改备用行的超链接颜色。我希望偶数行使用不同的超链接颜色，而奇数行使用另一种颜色。谢谢

— عثمانغني

4

好答案！但是，仅作为参考，还有另一个CSS选择器可以使用。tr:nth-of-type(odd/even)

— Nikhil Nanjappa 2014年

2

@عثمانغني：是的，你会做的tr:nth-child(even) a

— Gerard

1

如果您动态编写html，则无法使用。然后，您需要向行添加类。

— erik

在2019年：这不再是最好的解决方案。使用纯CSS。

— Chiramisu

158

您有:nth-child()伪类：

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

在早期，:nth-child()它的浏览器支持还很差。这就是为什么设置class="odd"变得如此普遍。在2013年末，我很高兴地说IE6和IE7终于死了（或病了足以停止照顾），但IE8仍然存在-幸好，这是唯一的例外。

— 阿尔瓦罗·冈萨雷斯（ÁlvaroGonzález）
source

3

首选答案，因为它不将CSS应用于标头

— Mike

嗨，这已经晚了几年了，但是如何在单击时将选定的具有bg颜色且带有jqeury的类添加到表行呢？我注意到，当您使用jqeury添加“选定”类时，：nth-child伪类bg-color将覆盖

— dutchkillsg

@dutchkillsg这似乎是一个全新的问题，而不是我的回答评论...

— 阿尔瓦罗·冈萨雷斯

对于“斑马条纹”（即垂直），只需tr:nth-child(odd)与交换td:nth-of-type(odd)。请注意，在这种情况下，您要对td而不是tr元素应用不同的伪类。

— Chiramisu

36

只需将以下内容添加到您的html代码中（<head>带有），就可以完成。

HTML：

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

比jQuery示例更容易，更快。

— bmich72
source

这应该是公认的答案。CSS应该尽可能处理样式，而javascript可以处理其他问题。

— Tormod Haugene 2015年

我每天都不做HTML。#ccc在我看来似乎不是有效的颜色代码。你可以解释吗？谢谢。

— tommy.carstensen 18-4-3

1

@ tommy.carstensen它称为“速记十六进制形式”。基本上#ccc扩展为#cccccc，这意味着每种RGB颜色都具有十六进制值cc或十进制值204（即rgb(204, 204, 204)）。在此处详细了解-> en.wikipedia.org/wiki/Web_colors#Shorthand_hexadecimal_form

— Nick Grealy

不适用于Chrome版本78.0.3904.108

— IlludiumPu36 '19

13

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

是的，您可以，但是随后您将不得不使用:nth-child()伪选择器（尽管支持有限）：

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

— 萨夫拉兹
source

13

我们可以使用奇数和偶数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>

展开摘要

— Santosh Khalse
source

10

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

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

— 斯里万塔·阿塔那耶克
source

9

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

— 普兰尼·拉娜（Pranay Rana）
source

46

好的，我知道jQuery在这个站点上相当普遍，但是无论您不应该在没有解释的情况下发布jQuery。该脚本无法独立运行。

— DisgruntledGoat 2010年

4

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

— 红方格
source

3

在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容易得多。

希望这可以帮助。

— 标记
source

谢谢@mark。站点将以PHP，.net或简单的HTML格式发布并不确定。

— 卡利·查兰·拉杰普特