使用 nth-child 在表格中交替颜色，除了选定的 TRs 组答案

【问题标题】：Using nth-child to alternate colors in a table except for selected groups of TRs使用 nth-child 在表格中交替颜色，除了选定的 TRs 组
【发布时间】：2015-03-23 23:03:15
【问题描述】：

我在HTML 中有一个表，我正在应用CSS 类，使用nth-child 为行提供交替颜色。但是有一些行我想是相同的颜色。如果我在这些行集周围放置一个 tbody，有没有办法在 CSS 中指定使该 tbody 中的行具有相同的颜色，然后继续交替颜色？另一种方法是手动设置行颜色，这似乎有点过分了。

例如：

<table class="alternate-row-colors">
  <tr>
     <td>Blah blah blah</td>
  </tr>
  <tbody>
     <tr>
       <td>Same color as below</td>
     </tr>
     <tr>
       <td>Same color as above</td>
     </tr>
   </tbody>
   <tr>
      <td>Continue alternating colors of rows</td>
   </tr>
</table>

【问题讨论】：

你能上传你的代码吗？
不是您的描述...nth-of 不能那样工作。如果你有一些代码，我们也许可以看一下。
为什么不给这些tr添加类而不是破坏HTML？
说实话，这个问题几乎没有显示谷歌或必应研究

标签： html css

【解决方案1】：

我能找到的唯一解决方案是将每个部分分成单独的 tbody 元素，并将替代类应用于具有所需样式的部分。

这些行不会像行数那样完全交替，我想不会提前知道......但它很接近。

.alternate-row-colors tr:nth-child(odd) {
  background: #bada55;
}
.alternate-row-colors tr:nth-child(even) {
  background: gold;
}

<table>
  <TBODY class="alternate-row-colors">
    <TR>
      <TD>Monday</TD>
      <TD>09/11/2000</TD>
      <TD>Kelsey</TD>
    </TR>
    <TR>
      <TD>Tuesday</TD>
      <TD>09/12/2000</TD>
      <TD>Lindsey</TD>
    </TR>
    <TR>
      <TD>Wednesday</TD>
      <TD>09/13/2000</TD>
      <TD>Randy</TD>
    </TR>
    <TR>
      <TD>Thursday</TD>
      <TD>09/14/2000</TD>
      <TD>Susan</TD>
    </TR>
    <TR>
      <TD>Friday</TD>
      <TD>09/15/2000</TD>
      <TD>Randy</TD>
    </TR>
    <TR>
      <TD>Saturday</TD>
      <TD>09/16/2000</TD>
      <TD>Lindsey</TD>
    </TR>
    <TR>
      <TD>Sunday</TD>
      <TD>09/17/2000</TD>
      <TD>Susan</TD>
    </TR>
  </TBODY>
  <TBODY>
    <TR>
      <TD>Monday</TD>
      <TD>09/18/2000</TD>
      <TD>Melody</TD>
    </TR>
    <TR>
      <TD>Tuesday</TD>
      <TD>09/19/2000</TD>
      <TD>Christiane</TD>
    </TR>
    <TR>
      <TD>Wednesday</TD>
      <TD>09/20/2000</TD>
      <TD>Symphony</TD>
    </TR>
    <TR>
      <TD>Thursday</TD>
      <TD>09/21/2000</TD>
      <TD>Starflower</TD>
    </TR>
    <TR>
      <TD>Friday</TD>
      <TD>09/22/2000</TD>
      <TD>Miko</TD>
    </TR>
    <TR>
      <TD>Saturday</TD>
      <TD>09/23/2000</TD>
      <TD>Cleo</TD>
    </TR>
    <TR>
      <TD>Sunday</TD>
      <TD>09/24/2000</TD>
      <TD>Alyx</TD>
    </TR>
  </TBODY>
  <TBODY class="alternate-row-colors">
    <TR>
      <TD>Monday</TD>
      <TD>09/25/2000</TD>
      <TD>Dancing Star</TD>
    </TR>
    <TR>
      <TD>Tuesday</TD>
      <TD>09/26/2000</TD>
      <TD>Dawn</TD>
    </TR>
    <TR>
      <TD>Wednesday</TD>
      <TD>09/27/2000</TD>
      <TD>Josh</TD>
    </TR>
    <TR>
      <TD>Thursday</TD>
      <TD>09/28/2000</TD>
      <TD>Ryan</TD>
    </TR>
    <TR>
      <TD>Friday</TD>
      <TD>09/29/2000</TD>
      <TD>Mary Kay</TD>
    </TR>
    <TR>
      <TD>Saturday</TD>
      <TD>09/30/2000</TD>
      <TD>Hallie</TD>
    </TR>
    <TR>
      <TD>Sunday</TD>
      <TD>10/01/2000</TD>
      <TD>Paul</TD>
    </TR>
  </TBODY>
</table>

【讨论】：

这是最接近问题的解决方案。我必须创建各种 css 类型来处理各种选项以正确显示每个 tbody。

【解决方案2】：

如果您想使用<tbody> 类型的元素来保存“相同颜色”的块，那么使用nth-child 元素很容易使用直接选择器>，因此：

.alternate-row-colors  > tr:nth-child(even) {
background-color: #A4D1FF;
}
.alternate-row-colors > tr:nth-child(odd) { 
background-color: #EAF4FF;
}

这只会影响类的直接后代tr元素。

【讨论】：

在 jsfiddle 上测试过，但它不起作用，因为 jsfiddle 将所有 tr 元素包装在 tbody 元素中，生成 3 个 tbody 元素。我不知道这种行为是来自 jsfiddle 还是其他浏览器常见
然后他可以将他想要更改的元素包装在其他元素中，例如 div 或者其他类？
此外（据我所知）tbody 元素不应该以这种方式使用。由于它应该表示表格中内容的主体，

【解决方案3】：

怎么样

CSS

.alternate-row-colors > tr:nth-child(odd) {
background-color: hsla(0, 0%, 0%, .2);
}

.alternate-row-colors > tr:nth-child(even), .alternate-row-colors-solid {
background-color: hsla(0, 0%, 0%, .4);
}

或者设置为第三种颜色

.alternate-row-colors-solid {
    background-color: blue;
    }

如果你想分组而不是在一个表中创建一个表，我怀疑是最简单的方法。

HTML

<table class="alternate-row-colors">
<tr>
<td>Zebra coloring</td>
</tr>
<tr>
<td>Zebra coloring</td>
</tr>
<tr>
<td>
<table class="alternate-row-colors-solid">
<tr>
<td>Same color</td>
</tr>
<tr>
<td>same color</td>
</tr>
<tr>
<td>same color</td>
</tr>
</table></td>
</tr>
<tr>
<td>Zebra coloring</td>
</tr>
<tr>
<td>Zebra coloring</td>
</tr>
</table>

.alternate-row-colors .alternate-row-colors-solid > tr {
    background-color: orange;
    }

然后将第二个表及其子表设置为 100% 的宽度和高度，删除填充、边距等，这样它们看起来就不像子表。

【讨论】：