Styling table borders with CSS - html

Question

I'm trying to do something very simple: create a table with single line borders.
There are many articles saying how to do that, and almost all of them include something like
table {
border-collapse: collapse;
}
td, th {
border: 1px solid orange;
}
Which works great.
But they all apply the styling universally to the td and th tags themselves, and therefore apply to all tables.
So I tried this
.bordered {
border-collapse: collapse;
border: 1px solid orange;
text-align: center;
color: blue;
}
<table class=bordered>
<tr> <td> ABC </td> <td> DEF </td> </tr>
<tr> <td> HIJ </td> <td> JLK </td> </tr>
</table>
I get a table with orange outer border, blue letters, and no internal borders.
I also tried
table.bordered, tr.bordered, td.bordered {
to no avail. Also putting "class=" on the tr tags didn't help.
I have learned that border properties are not inherited.
The DOM Inspector confirms that: just the color and centering are inherited by the td elements from the .bordered class.
My question is this:
How do I get borders on the cells without adding "class=" to every single td tag?
(A use case would if there are two tables on the page, and I want the borders styled differently for them).

Answer 1

Just take the css that works for all tables, and add table.bordered before all of them:
table.bordered {
border-collapse: collapse;
}
table.bordered td, table.bordered th {
border: 1px solid orange;
}
<table class="bordered">
<tr> <td> ABC </td> <td> DEF </td> </tr>
<tr> <td> HIJ </td> <td> JLK </td> </tr>
</table>
<table>
<tr> <td> ABC </td> <td> DEF </td> </tr>
<tr> <td> HIJ </td> <td> JLK </td> </tr>
</table>