Remove borders in nested table - html

Question

How does one prevent the inheriting of borders in a nested tabled?
I tried to a add a borderless class to the nested table, but the borders of the parent class are still inherited.
.plain_tbl {
border: none;
}
.plain_tbl tr td {
border: none;
}
.tbl {
border: 1px solid;
}
.tbl tr td {
border: 1px solid;
}
<table class="tbl">
<tr>
<td align=center style="padding:50px">
<table border=0 class="plain_tbl">
<tr>
<td>0--------------------100</td>
</tr>
<tr>
<td align=center> ^ <br>50</td>
</tr>
</table>
</td>
</tr>
</table>
I am looking for a solution which does not change the parent class, i.e. how to make the nested class overwrite the parent class

Answer 1

The problem you have is
.tbl tr td {
border: 1px solid;
}
which will add a border to every <td> also if it is a table inside a table you could fix it by using
.tbl > tr > td {
border: 1px solid;
}
.plain_tbl {
border: none;
}
.plain_tbl tr td {
border: none;
}
.tbl {
border:1px solid;
}
.tbl > tr > td {
border: 1px solid;
}
<table class="tbl">
<tr>
<td align=center style="padding:50px">
<table border=0 class="plain_tbl">
<tr><td>0--------------------100</td></tr>
<tr><td align=center> ^ <br>50</td></tr>
</table>
</td>
</tr>
</table>
Update, another solution then previous using specificity
In the comments you asked
why does the nested class not overwrite the parent class?
The reason is Specificity and the order of your CSS rules. If you are not allowed to change the CSS order you can change the specificity. You need to be more specific then this
.tbl tr td {
border: 1px solid;
}
To be more specific you can change like so
.tbl .plain_tbl tr td {
border: none;
}
run the code snippet and see it work
.plain_tbl {
border: none;
}
.tbl .plain_tbl tr td {
border: none;
}
.plain_tbl tr td {
border: none;
}
.tbl {
border:1px solid;
}
.tbl tr td {
border: 1px solid;
}
<table class="tbl">
<tr>
<td align=center style="padding:50px">
<table border=0 class="plain_tbl">
<tr><td>0--------------------100</td></tr>
<tr><td align=center> ^ <br>50</td></tr>
</table>
</td>
</tr>
</table>
Third method, only changing the order of your css
because both rules actually have the same specificity you can also just place the rule .plain_tbl tr td after .tbl tr td { in your css file like so:
.plain_tbl {
border: none;
}
/*
move this to the bottom
.plain_tbl tr td {
border: none;
}
*/
.tbl {
border: 1px solid;
}
.tbl tr td {
border: 1px solid;
}
/* see here */
.plain_tbl tr td {
border: none;
}
<table class="tbl">
<tr>
<td align=center style="padding:50px">
<table border=0 class="plain_tbl">
<tr><td>0--------------------100</td></tr>
<tr><td align=center> ^ <br>50</td></tr>
</table>
</td>
</tr>
</table>

Answer 2

your problem lies with the order of rules, since .tbl td is more general, it also applied to the inner element, and since its the last rule applied, it overrides the previous rule, which is the more specific rule
.
so simply rearrange your css and fix
.tbl {
border: 1px solid;
}
.tbl tr td {
border: 1px solid;
}
.plain_tbl {
border: none;
}
.plain_tbl tr td {
border: none;
}
<table class="tbl">
<tr>
<td align=center style="padding:50px">
<table border=0 class="plain_tbl">
<tr>
<td>0--------------------100</td>
</tr>
<tr>
<td align=center> ^ <br>50</td>
</tr>
</table>
</td>
</tr>
</table>

Answer 3

You can f.e. remove the plain_tbl class completely, and just apply the border to table cells that are in rows that are direct descendants of your main table:
.tbl,
.tbl > tr > td {
border: 1px solid;
}