Styling table borders with CSS

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>