1

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.stack.imgur.com/2rbm8.jpg

Thanks.

Joseph Marikle
  • 76,418
  • 17
  • 112
  • 129
  • 2
    This is essentially already answered in [Why is the CSS border-color inheriting the the color property?](https://stackoverflow.com/questions/34667409/why-is-the-css-border-color-inheriting-the-the-color-property) - the only difference here is that the td is inheriting the specified value of color from its parent tr, which then gets applied to its own borders exactly as described in the link. – BoltClock Jun 01 '17 at 15:42
  • As far as i understand, TR is virtual element, TD is visual. Logic says, yes, it's inherited and that should be normal behavior, not a bug. Anyway, I'm not an expert in this area, better seek for another opinion. – Wh1T3h4Ck5 Jun 01 '17 at 15:43

2 Answers2

5

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.

Joseph Marikle
  • 76,418
  • 17
  • 112
  • 129
  • I think OP expected to just change the text color. But he also show change in color of border. So, he asked this question. – Vishal Jun 01 '17 at 15:50
0

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;
}
Maurice
  • 11