CODEWITHSUNDEEP
htmlcss
Muflix
Muflix

Reputation: 6778

Css selector for all <td> of specific <th>

I have multiple tables like these

Table 1

<table border="1" style="border-collapse: collapse">
        <thead>
            <tr>
                <th class="One">One</th>
                <th class="Two">Two</th>
                <th class="Three">Three</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>DateTime</td>
                <td>Price</td>
                <td>Number</td>
            </tr>
            <tr>
                <td>DateTime</td>
                <td>Price</td>
                <td>Number</td>
            </tr>
         </tbody>
    </table>

Table 2

<table border="1" style="border-collapse: collapse">
            <thead>
                <tr>
                    <th class="Two">Two</th>
                    <th class="Three">Three</th>
                    <th class="One">One</th>
                    <th class="Four">Four</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Price</td>
                    <td>Number</td>
                    <td>DateTime</td>
                    <td>Text</td>
                </tr>
                <tr>
                    <td>Price</td>
                    <td>Number</td>
                    <td>DateTime</td>
                    <td>Text</td>
                </tr>
             </tbody>
        </table>

tables share some columns, but they can be in different order. It is possible to style only specific column with my class ? For example, set color to red, for all <td> where <th> has class "Three".

Upvotes: 2

Views: 2177

Answers (3)

Hugo Coutinho
Hugo Coutinho

Reputation: 11

You're better off giving same class to the <th> and to the corresponding <td> if you want to style them the same way

<!-- set classes for all tr -->
<p> A class for spesial col</p>
<table border="1" style="border-collapse: collapse" class="every-other-one">
  <thead>
  <tr>
    <th class="Two">Two</th>
    <th class="Three">Three</th>
    <th class="One">One</th>
    <th class="Four">Four</th>
  </tr>
  </thead>
  <tbody>
  <tr>
    <td class="Two">Price</td>
    <td class="Three">Number</td>
    <td class="One">DateTime</td>
    <td class="Four">Text</td>
  </tr>
  <tr>
    <td class="Two">Price</td>
    <td class="Three">Number</td>
    <td class="One">DateTime</td>
    <td class="Four">Text</td>
  </tr>
  <tr>
    <td class="Two">Price</td>
    <td class="Three">Number</td>
    <td class="One">DateTime</td>
    <td class="Four">Text</td>
  </tr>
  </tbody>
</table>
<br>

It should look something like this

Upvotes: 1

Oris Sin
Oris Sin

Reputation: 1217

Here you go. As you wanted to target specific columns, from the table you have in the example, I suppose that if you are able to target every nth-child(2) column td of a tr, you are good to go and your CSS code should look like this.

tr.redClass td {
  background-color: #a33;
  color: #fff;
}

.redCol td {
  background-color: #a33;
  color: #fff;
}
 .every-other-one tr:nth-child(n) td:nth-child(2) {background: #a33}
<!-- set classes for all tr -->
<p> A class for spesial col</p>
<table border="1" style="border-collapse: collapse" class="every-other-one">
  <thead>
  <tr>
    <th class="Two">Two</th>
    <th class="Three">Three</th>
    <th class="One">One</th>
    <th class="Four">Four</th>
  </tr>
  </thead>
  <tbody>
  <tr>
    <td>Price</td>
    <td>Number</td>
    <td>DateTime</td>
    <td>Text</td>
  </tr>
  <tr>
    <td>Price</td>
    <td>Number</td>
    <td>DateTime</td>
    <td>Text</td>
  </tr>
  <tr>
    <td>Price</td>
    <td>Number</td>
    <td>DateTime</td>
    <td>Text</td>
  </tr>
  </tbody>
</table>
<br>

I hope that can serve you. Cheers

Upvotes: 1

nima amr
nima amr

Reputation: 661

we can set class on th and select like this

th.redCallas td {
 backGround-color:#a33;
 color: #f
}


tr.redClass td {
  background-color: #a33;
  color: #fff;
}

.redCol td {
  background-color: #a33;
  color: #fff;
}
.every-other-one tr:nth-child(even) {background: #CCC}
tr:nth-child(odd) {background: #FFF}
<!-- set classes for all tr -->
<p> A class for spesial col</p>
<table border="1" style="border-collapse: collapse">
  <thead>
  <tr>
    <th class="Two">Two</th>
    <th class="Three">Three</th>
    <th class="One">One</th>
    <th class="Four">Four</th>
  </tr>
  </thead>
  <tbody>
  <tr class="redClass">
    <td>Price</td>
    <td>Number</td>
    <td>DateTime</td>
    <td>Text</td>
  </tr>
  <tr>
    <td>Price</td>
    <td>Number</td>
    <td>DateTime</td>
    <td>Text</td>
  </tr>
  <tr class="redClass">
    <td>Price</td>
    <td>Number</td>
    <td>DateTime</td>
    <td>Text</td>
  </tr>
  </tbody>
</table>
<br>
<!-- set a class for all tr -->
<p> A class for all th</p>
<table border="1" style="border-collapse: collapse" class="redCol">
  <thead>
  <tr>
    <th class="Two">Two</th>
    <th class="Three">Three</th>
    <th class="One">One</th>
    <th class="Four">Four</th>
  </tr>
  </thead>
  <tbody>
  <tr>
    <td>Price</td>
    <td>Number</td>
    <td>DateTime</td>
    <td>Text</td>
  </tr>
  <tr>
    <td>Price</td>
    <td>Number</td>
    <td>DateTime</td>
    <td>Text</td>
  </tr>
  <tr>
    <td>Price</td>
    <td>Number</td>
    <td>DateTime</td>
    <td>Text</td>
  </tr>
  </tbody>
</table>

<!-- every other one -->
<p> every other one</p>
<table border="1" style="border-collapse: collapse" class="every-other-one">
  <thead>
  <tr>
    <th class="Two">Two</th>
    <th class="Three">Three</th>
    <th class="One">One</th>
    <th class="Four">Four</th>
  </tr>
  </thead>
  <tbody>
  <tr>
    <td>Price</td>
    <td>Number</td>
    <td>DateTime</td>
    <td>Text</td>
  </tr>
  <tr>
    <td>Price</td>
    <td>Number</td>
    <td>DateTime</td>
    <td>Text</td>
  </tr>
  <tr>
    <td>Price</td>
    <td>Number</td>
    <td>DateTime</td>
    <td>Text</td>
  </tr>
   <tr>
    <td>Price</td>
    <td>Number</td>
    <td>DateTime</td>
    <td>Text</td>
  </tr>
  </tbody>
</table>

Upvotes: 0

Related Questions