CODEWITHSUNDEEP
htmlcss
McDuck4
McDuck4

Reputation: 662

font color on css and tables

I am making a newsletter template in foundation. The following table consist of 2 <th> that have the content "Reservationnumber" and "23425-FF3234". I have around 60 of these <th>. I would like to give the font a color. I can make that work if I set the class class="reservation__fontcolor" on each <strong> tag and <th> tag. But when I set it on the table that surrounds the <th> tag, it is not working.

Is there a way where I can set the class="reservation__fontcolor" on a more global level, so I do not have to copy/paste the class tag 60 times?

In the following code I tried to set the <th class="small-6 large-6 columns first reservation__fontcolor"> on the <th> tag that have both include the <td> tag. But that is not working. Why?

CSS

.reservation__fontcolor {
        color: red;
       }

HTML

<table align="center" class="wrapper header float-center bgcolor">
  <tbody>
    <tr>
      <td class="wrapper-inner">
        <table align="center" class="container" style="background-color:transparent">
          <tbody>
            <tr>
              <td>
                <!-- Reservationnumber -->
                <table class="row collapse">
                  <tbody>
                    <tr>
                      <th class="small-6 large-6 columns first reservation__fontcolor">
                        <table>
                          <tbody>
                            <tr>
                              <th>
                                <strong>Reservationnumber:</strong>
                              </th>
                            </tr>
                          </tbody>
                        </table>
                      </th>
                      <th class="small-6 large-6 columns last">
                        <table>
                          <tbody>
                            <tr>
                              <th>
                                23425-FF3234
                              </th>
                              <th class="expander"></th>
                            </tr>
                          </tbody>
                        </table>
                      </th>
                    </tr>
                  </tbody>
                </table>                             
              </td>
            </tr>
          </tbody>
        </table>
      </td>
    </tr>
  </tbody>
</table>

Upvotes: 1

Views: 15823

Answers (3)

Aipi
Aipi

Reputation: 2476

You will need to work with Nested CSS selector.

In the example below I am working with a minimal scope just to figure the idea, however, it can start in the first table to reach the th wanted.

CSS:

<style>
    table.reservation__fontcolor th{
        color red;
    }
</style>

HTML:

<table class="row collapse reservation__fontcolor">
   <tbody>
      <tr>
        <th class="small-6 large-6 columns first ">
            <table class="reservation__fontcolor">
                <tbody class="">
                    <tr>
                        <th>
                            <strong>Reservationnumber:</strong>
                        </th>
                    </tr>
                </tbody>
            </table>
        </th>
        <th class="small-6 large-6 columns last">
            <table>
                <tbody class="reservation__fontcolor">
                    <tr>
                        <th>
                            23425-FF3234
                        </th>
                        <th class="expander"></th>
                    </tr>
                </tbody>
            </table>
        </th>
    </tr>
    </tbody>
</table>

Upvotes: 0

David Neto
David Neto

Reputation: 808

you can add class reservation__fontcolor to your table and then add this on your css:

.reservation__fontcolor tr th{
    color: red;
}

It's like a path, you can read it as follows: all the th tags, inside tr tags, inside an element of class reservation__fontcolor get the properties defined.

This prevents any other th tags outside a table from that class from getting the property, which would happen for example with:

th{
    color: red;
}

If you wanted both th and td tags to get the same properties but only when inside a class table, you could do:

.reservation__fontcolor tr th, .reservation__fontcolor tr td{
    color: red;
}

I think the difference between those concepts is the key to understand how it works and applying it on different situations.

Good luck.

Upvotes: 2

techhunter
techhunter

Reputation: 693

You can use one single table and you can ca color by tag. I have created aenter code herefiddle

Upvotes: 0

Related Questions