How can I alternate coloring between table bodies? CSS

Question

I have a large table with alternating rows. Within one of the td values in the rows is a nested table. I want to match the colors of the nested tables with the corresponding row. So if the first row is a blue row and the second row is a white row, I would like the table within the blue row to be blue while the table in the white row to be white.

I've looked at a few posts on the forum referencing the nth-child(number) selector. However, I always see this selector with corresponding rows. I've tried implementing it with table and table bodies but with no luck. Here is what I've tried.

.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

So far I haven't had much luck but I was wondering if there was a way to grab the table itself and change the background color? By the way I am using Sass.

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

This is some pseudo code of what I'm trying to do. I'm working on a large application so it can be confusing. Here goes:

<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

That's my pseudo code. The first row created is a grey row, the second is white, repeat and repeat. What I need is to grab the table under gender stats to match the color of the respective row that it is in. What I have now is the first row of the nested table is grey and the second is white. I need the entire table to be grey or white. Does that help?

----EDIT----

Just in case this is still unclear. Please refer to this screenshot.

enter image description here

See how the nested table within these rows are themselves alternately striped. I need the nested table in the first row to be grey while the second table is white matching its respective row. Help would be appreciated.

possible duplicate of [Alternate table row color using CSS?](http://stackoverflow.com/questions/3084261/alternate-table-row-color-using-css) — morissette, Oct 27 '14 at 20:32
Sure I'll add some HTML, but I'm working on a large application so I'll try to trim it down to avoid confusion. — Dan Rubio, Oct 27 '14 at 20:35
Thanks for the reply morissette. I've already came across this post, but it's not what I'm looking for. I'm trying to change the color of the table, not the rows which the post refers to. — Dan Rubio, Oct 27 '14 at 20:57
Show a real HTML document with your real attempt at setting what you want, and explain what exactly goes wrong with it. And how does the title relate to the content of the question? The pseudocode has just one `tbody` per `table` element, so what “table bodies” are you referring to? — Jukka K. Korpela, Oct 27 '14 at 22:22

score 1 · Answer 1 · answered Oct 27 '14 at 20:36

1

I think you could use direct children rules, something like:

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

this would take direct on every level.

An easier and more fool proof solution would be to assign classes to the sub tables, then on nth-child(odd) .table you overwrite the background color of all td inside of it.

answered Oct 27 '14 at 20:36

Pablo Rincon

999
10
23

@Pable Rincon this helped me to solve another problem. by avoiding head from css alter row styling – Arun Prasad E S Dec 20 '16 at 09:19

score 0 · Accepted Answer · answered Oct 27 '14 at 21:04

In your CSS code you are using space/descendant operator. Instead, use direct child (>) operator to select the rows that are directly within the first tbody. Here's a fiddle: http://jsfiddle.net/mnvrozvb/. Nested tables will inherit their ancestor's background color.

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;
}

I had to modify this for Sass but it worked. Thanks. – Dan Rubio Oct 29 '14 at 15:54 — Dan Rubio, Oct 29 '14 at 15:54

How can I alternate coloring between table bodies? CSS

2 Answers2