Question

我有一个交替行的大表。在行中的一个td值中是嵌套表。我想匹配嵌套表的颜色与相应的行。因此，如果第一行是蓝色行而第二行是白色行，我希望蓝色行中的表为蓝色，而白色行中的表为白色。

我查看了论坛上引用第n个孩子（数字）选择器的几个帖子。但是，我总是看到这个选择器有相应的行。我尝试用桌子和桌子实体来实现它，但没有运气。这是我尝试过的。

.table.unstyled table:nth-child(n) tbody tr td
  :border none
  :background-color blue

.table.unstyled table tbody:nth-child(n) tr td
  :border none
  :background-color blue

到目前为止，我还没有多少运气，但我想知道是否有办法抓住桌子本身并改变背景颜色？顺便说一下，我正在使用Sass。

----- EDIT --------

这是我尝试做的一些伪代码。我正在处理大型应用程序，因此可能会让人感到困惑。这是：

<table>
  <thead>
    <tr>
      <th> Name
      <th> Date
      <th> Email
      <th> Address
      <th> Gender
    <tbody>
       -a ruby loop that goes through a bunch of items-
       <tr>
         <td> Name Stats
         <td> Date Stats
         <td> Email Stats
         <td> Address Stats
         <td> 
            <table>
              <tbody>
                <tr>
                  <td> Some gender stats
                  <td> Even gender more stats
                <tr> 
                   <td> Other gender Stuff
                   <td> Even more gender Stuff

那是我的伪代码。创建的第一行是灰色行，第二行是白色，重复和重复。我需要的是获取性别统计下的表格以匹配它所在的相应行的颜色。我现在拥有的是嵌套表格的第一行是灰色，第二行是白色。我需要整个桌子是灰色或白色。这有帮助吗？

----编辑----

以防万一仍不清楚。请参阅此屏幕截图。

enter image description here

了解这些行中的嵌套表本身是如何交替条带化的。我需要第一行中的嵌套表是灰色的，而第二个表是白色匹配其相应的行。帮助将不胜感激。

Answer 1

我认为您可以使用直接子规则，例如：

.mytable > tbody > tr > td:nth-child(odd){
   background:...
}
.mytable > tbody > tr > td:nth-child(even){
   background:...
}

这将直接涉及各个层面。

更简单，更简单的解决方案是将类分配给子表，然后在nth-child（odd）.table上覆盖其中所有td的背景颜色。

Answer 2

在CSS代码中，您正在使用空格/后代运算符。而是使用直接子（>）运算符来选择直接位于第一个tbody内的行。这是一个小提琴：http://jsfiddle.net/mnvrozvb/。嵌套表将继承其祖先的背景颜色。

HTML：

<table>
    <tr>
        <td>#1</td>
        <td>Some text</td>
        <td>
            <table>
                <tr>
                    <td>3.23</td>
                    <td>3.22</td>
                </tr>
            </table>
        </td>
    </tr>
    <tr>
        <td>#2</td>
        <td>More text</td>
        <td>
            <table>
                <tr>
                    <td>3.23</td>
                    <td>3.22</td>
                </tr>
            </table>
        </td>
    </tr>
    <tr>
        <td>#3</td>
        <td>Paragraph</td>
        <td>
            <table>
                <tr>
                    <td>Stat</td>
                    <td>Stat</td>
                </tr>
            </table>
        </td>      
    </tr>
</table>

CSS：

body > table > tbody > tr:nth-of-type(odd) {
    background-color: teal;
}

body > table > tbody > tr:nth-of-type(even) {
    background-color: orange;
}

如何在表体之间交替着色？ CSS

2 个答案: