CODEWITHSUNDEEP
htmlcss
ZoharYosef
ZoharYosef

Reputation: 257

How to set background color on inner table only

Let's say that is my html code:

<table>
   <tbody>
      <tr>
         <td>1</td>
         <td>2</td>
         <td>3</td>
      </tr>
      <tr>
         <td>4</td>
         <td>5</td>
         <td>6</td>
      </tr>
      <tr>
         <td>
            <table>
               <tbody>
                  <tr>
                     <td>A</td>
                     <td>B</td>
                     <td>C</td>
                  </tr>
                  <tr>
                     <td>D</td>
                     <td>E</td>
                     <td>F</td>
                  </tr>
               </tbody>
            </table>
         </td>
      </tr>
   </tbody>
</table>

I want to paint only the inner table (A,B,C,D,E,F) to red (background-color:red)

Important to note - there is no "class" or "id" on purpose!!! I want a solution without it...

Upvotes: 1

Views: 1591

Answers (5)

Ale
Ale

Reputation: 447

Initially I misunderstood how to use the nth-child() psudeo-class. I understand it now. the below code will do what you ask.

To get the inner table you need to access the inner table rows. There are in fact other ways to do this using the nth formula however this is the simplest I can think of.

3 translates to the 3rd table row inside the initial table tag.

table tr:nth-child(3){
    background: red;
}

https://jsfiddle.net/USERALPHA32/ufjqgewa/1/

And this will also do what you ask. The difference between this fiddle and the one above is that this one will access the nested table directly https://jsfiddle.net/USERALPHA32/ufjqgewa/3/

table tr table:nth-child(1){
    background: red;
}

__________________________ABOVE IS CORRECT__________________________________

__________________________BELOW IS WRONG____________________________________

to get to a table inside a table you would do:

table:nth-child(2) {
    background: red;
}

I believe you could use the nth-child selector. Though this may cause issue with cross browser support.

https://www.sitepoint.com/web-foundations/nth-childn-css-selector/

Upvotes: 0

Ganesh Putta
Ganesh Putta

Reputation: 2681

table table td {
background-color: red;
}
<table>
   <tbody>
      <tr>
         <td>1</td>
         <td>2</td>
         <td>3</td>
      </tr>
      <tr>
         <td>4</td>
         <td>5</td>
         <td>6</td>
      </tr>
      <tr>
         <td>
            <table>
               <tbody>
                  <tr>
                     <td>A</td>
                     <td>B</td>
                     <td>C</td>
                  </tr>
                  <tr>
                     <td>D</td>
                     <td>E</td>
                     <td>F</td>
                  </tr>
               </tbody>
            </table>
         </td>
      </tr>
   </tbody>
</table>

Upvotes: 1

pr0gramista
pr0gramista

Reputation: 9008

Use selector like: 

table table {
    background-color: red;
}

Translation: table inside table.

Upvotes: 0

Christophe
Christophe

Reputation: 354

You could use table table { ... }. That should apply only to tables nested within another table tag. Or explicitely table > tbody > tr > td > table { ... }.

Hope this helps,

Chris.

Upvotes: 0

Pepo_rasta
Pepo_rasta

Reputation: 2900

this selector basically means: table inside table

table table{
  background-color: red;
}
<table>
   <tbody>
      <tr>
         <td>1</td>
         <td>2</td>
         <td>3</td>
      </tr>
      <tr>
         <td>4</td>
         <td>5</td>
         <td>6</td>
      </tr>
      <tr>
         <td>
            <table>
               <tbody>
                  <tr>
                     <td>A</td>
                     <td>B</td>
                     <td>C</td>
                  </tr>
                  <tr>
                     <td>D</td>
                     <td>E</td>
                     <td>F</td>
                  </tr>
               </tbody>
            </table>
         </td>
      </tr>
   </tbody>
</table>

Upvotes: 0

Related Questions