Question

我有一个包含多个<tbody>元素的表格。在给定时间，只显示一个<tbody>，或者显示所有table tr:nth-child(even) { background: #efefef; }。

我目前使用这个CSS3代码对表进行条带化：

<tbody>

当显示单个<tbody>元素时，一切（显然）都很好，但是当显示多个<tbody>元素时，CSS规则将分别应用于每个元素，并且每个<tbody> <tr> [ODD] <tr> [EVEN] <tr> [ODD] </tbody> <tbody> <tr> [ODD] <tr> [EVEN] </tbody> …都有它自己的“条纹系统”。根据行数的不同，条纹可能看起来也可能看起来不一致。

{{1}}

我是否必须使用JavaScript（... jQuery）来解决这个问题？或者是否有纯CSS解决方案？

Answer 1

如果你正在使用jQuery，那么使用:even选择器，（编辑：处理可见性）like this：

$("table tr:visible:even").addClass("even");

这样的课程：

.even { background: #efefef; }

再一次， if 你已经在使用jQuery了，如果你没有使用纯粹的javascript解决方案（包括的任何库，那就太过分了）就像bobince发布了。无论哪种方式，我都没有在这里看到一个纯粹的CSS解决方案......这绝对是一个有效的案例，但并不是经常出现足以让它变得特别值得的。

Answer 2

如果您的行具有相同的高度，则可以使用渐变作弊，例如：

#table {
    background-image: repeating-linear-gradient(pink 0, pink 1.6em, yellow 1.6em, yellow 3.2em);
    background-repeat: no-repeat;

    /* To account for headers; adjust size to account for footers.
     * You can also use a second (or third) gradient for both.
     */
    background-position: 0 1.4em;
}

如果你可以保证所有<tbody>元素都有偶数行，你也可以使用它（即使最后一行是隐藏的），但除此之外，你运气不好。选择者等级4可能有一些关于它的说法，但有一些与

相似的东西

#table > !tbody > tr:last-child:nth-child(even)

弥补课程。

Demo!

Answer 3

经过深入研究，我可以说明

没有纯CSS3（甚至不是CSS4）解决方案来匹配多个父母的偶数/奇数行。

你想到的所有解决方案都是不可能的：

使用:nth-child pseudo-class。

判决：这只适用于单亲。
以某种方式让tbody标签包含奇数行（颜色切换器），通过计算他们的子项并以类似的方式区分奇数行nth-child(odd)。

判决：在CSS中无法计算儿童数量，请参阅this question。要小心这个令人困惑的接受答案 - 这实际上是在计算兄弟姐妹，而不是孩子
尝试根据某些子CSS规则仅匹配一些tbody，从而能够识别具有奇数子项的tbody。

判决：在CSS中，根据子女不能匹配元素：
CSS4引入了一个新的选择器:nth-match，听起来很有希望，因为它中不包含单词“child”。所以你会想知道这是否有效：

:nth-match(even of tr) { background-color: #ccc; }
:nth-match(odd of tr) { background-color: #fff; }

判决：它不起作用。如果您查看说明，您会发现它与您观察到的完全相同：

:nth-match(An+B of <selector>)伪类表示法表示具有与给定选择器列表匹配的An+B-1 兄弟的元素在文档树之前。

有问题的是兄弟姐妹这个词，这意味着它只会在每个tbody标签中计算，就像:nth-child选择器一样。

结论

没有纯CSS（CSS3和CSS4）解决方案。你必须克制：

javascript，例如Nick Craver提到的优秀jQuery解决方案;

minitech的背景技巧，但其使用仅限于等高行;

更改HTML生成代码。

Answer 4

如果使用JQuery，请使用此代码：

//style for even CSS Class
<style>.even { background: #efefef; } </style>

为了样式目的，将类添加到每个第二行表

 <script>
   $('tbody').parents('.table-container').find('tr:even').addClass( 'even' );
 </script>

HTML代码

<div class="table-container">
    <table>
        <tbody>
          <tr> [ODD]
          <tr> [EVEN]
          <tr> [ODD]
        </tbody>
        <tbody>
          <tr> [ODD]
          <tr> [EVEN]
        </tbody>
    </table>
</div>

Answer 5

现在在任何浏览器中都不起作用的解决方案（据我所知）将使用计数器（在tr上）然后使用w3c计数器样式级别3中的那个：

w3c doc

3.1.1。循环符号：'循环'系统

'循环'计数器系统通过其提供的循环重复循环   符号，当它到达结束时循环回到开头   名单。它可以用于简单的子弹（只需提供一个计数器）   符号），或循环通过多个符号。第一个柜台   symbol用作值1的表示，第二个   计数器符号（如果存在）用作表示符号   价值2等。

如果系统是'循环'，'符号'描述符必须包含at   至少一个计数器符号，或者'@ counter-style'规则是   无效。该系统是在所有计数器值上定义的。

“三角形子弹”计数器样式可以定义为：

@ counter-style triangle {system：cyclic;符号：‣;后缀：''; }

然后它将生成如下所示的列表：

‣一个‣二‣三如果有N个计数器符号和一个   正在为整数值构造表示   表示是索引（（value-1）mod N）的计数符号   计数器符号列表（0索引）。

如果我用2个符号设置这个规则，一个是填充的正方形，另一个是空的正方形，我得到一个在颜色和透明度之间交替的伪元素。

然后我可以强制这个伪元素扩展到所有的tr。

Answer 6

是的，我认为你需要脚本，因为没有nth-grandchild选择器可以相对于<table>工作。无论如何，你需要脚本才能使它在旧版浏览器中运行，所以可能没什么大不了的。

var table= document.getElementById('sometable');
for (var i= table.rows.length; i-->0;)
    table.rows[i].className= i%2===0? 'stripe-even' : 'stripe-odd';

纯CSS3解决方案条纹表与多个元素？

6 个答案:

没有纯CSS3（甚至不是CSS4）解决方案来匹配多个父母的偶数/奇数行。

结论

w3c doc