0

So i've watched a lecture on CSS rules inheritance and I was curious about how it would hork with HTML tables, so i tried to test some code to get a better understanding of inheritance.

I wrote the following code:

table{
    border: 1px solid black;
    color: greenyellow;
}

.Table2, .th2{
    border: 1px solid black;
    color: greenyellow;
}
<!DOCTYPE html>
<hmt lan="en">
<head></head>
<body>
                    <table class="Table">
                        <tr>
                            <th>
                                Style
                            </th>
                            <th>
                                ID
                            </th>
                            <th>
                                # of Classes, Pseudo-Classes
                            </th>
                            <th>
                                # of Elementes
                            </th>
                        </tr>
                    </table>
            <br><br>
                    <table class="Table2">
                        <tr>
                            <th class="th2">
                                Style
                            </th>
                            <th class="th2">
                                ID
                            </th>
                            <th class="th2">
                                # of Classes, Pseudo-Classes
                            </th>
                            <th class="th2">
                                # of Elements
                            </th>
                        </tr>
                    </table>

</body>
</html>

i was specting both CSS codes to look the same, since the <th> tag seems to be a child of the <table> tag. In fact, with the first CSS rule, the Color property did inherit from <table> to <th>, and the text defined in <th> was green, BUT the border property does not seems to be inherited. In the first case, i just get by result an square around my table, in the second case i get that same square but with little squares surrounding each sentence.

Result from the first CSS rule to <table>

Result of the second CSS rule to <table> <th>

Now my question is: Why <th>didn't inherit the border property in the first case, are there some properties that does not pass from parent to child, if so, where can i find them? Or maybe <th> is defined not to be <table> child? What is happening here?

Diego Andres Gomez Polo
  • 1
  • 2

2 Answers2

1

… are there some properties that does not pass from parent to child…

Some properties inherit. Some do not.

… if so, where can i find them?

You can find them in the specs. For color, you'll see that "Inherited" is "yes", whereas for border`, you'll see that "Inherited" is "no".

Note that I linked to the MDN web docs, which reference the actual specs.

charles
  • 1,814
  • 2
  • 13
  • 19
0

A border on a table will only be applied to the table element itself (the outside), which you have shown in your first example.

By default, there is is spacing between table cells. If you add a border to the children you will see that spacing as your 2nd example shows.

To avoid this spacing you need to use border-collapse

table, th {
    border: 1px solid black;
    color: greenyellow;
    border-collapse: collapse;
}
<table>
  <tr>
    <th>
      Style
    </th>
    <th>
      ID
    </th>
    <th>
      # of Classes, Pseudo-Classes
    </th>
    <th>
      # of Elementes
    </th>
  </tr>
</table>

As far as inheritance goes, I'd point you to this question: Which CSS properties are inherited?

abney317
  • 7,760
  • 6
  • 32
  • 56
  • Is there any general rule to know wich properties for a given tag inherit to its childs? or maybe any place with centralized information on the inheritances of every property? – Diego Andres Gomez Polo Jun 08 '20 at 17:08
  • Typically font/text related things will be inherited. You can see a list in the answer on this question: https://stackoverflow.com/questions/5612302/which-css-properties-are-inherited – abney317 Jun 08 '20 at 17:12