CODEWITHSUNDEEP
htmlcss
user4143172
user4143172

Reputation:

Why does table <td> border color inherit from <tr> element color?

I just notice that if I set "tr" element color to red, then "td" border color is also set to red. Is it a browser's bug?

https://jsfiddle.net/tbgggu62/3/

<table>
    <tbody>
        <tr style="color: red;">
            <td >A</td>
            <td>B</td>
        </tr>
        <tr class="spaceUnder">
            <td>C</td>
            <td>D</td>
        </tr>
        <tr>
            <td>E</td>
            <td>F</td>
        </tr>
    </tbody>
</table>

https://i.sstatic.net/2rbm8.jpg

Thanks.

Upvotes: 1

Views: 2602

Answers (2)

Maurice
Maurice

Reputation: 11

As Joseph Marikle said the color is inherited by default. Since it was set at the tr level everything under it will also be set to red unless you don't want it to be.

to leave the text red, but change the border color use this:

td {
  border-style: solid;
  border-width: 1px;
  border-color:black;
}

or use shorthand(it saves space)

td {
  border:solid 1px black;
}

to have the border red, but change the text color in the first row do this:

td {
  border:solid 1px;
}

tr:nth-child(1) td{
  color:black;
  border: solid 1px red;
}

Upvotes: 0

Joseph Marikle
Joseph Marikle

Reputation: 78540

It is not a bug. You have set the color for the tr to red, the td inherits color from its parent and is therefore also red. Lastly, you have set the border-style and border-width of the td, but you did not set the border-color. border-color defaults to currentcolor, which is the text color of the element: in this case red.

Through a series of inheritance and default values, it is working as intended.

Upvotes: 5

Related Questions