樣式表邊框為 CSS

Question

我正在嘗試做一些非常簡單的事情：創建一個帶有單線邊框的表格。

有很多文章說如何做到這一點，幾乎所有文章都包含類似

table {
   border-collapse: collapse;
  }
td, th {
   border: 1px solid orange;
  }

效果很好。

但它們都將樣式普遍應用於 td 和 th 標簽本身，因此適用於所有表格。

所以我試過了

.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>

我得到一張帶有橙色外邊框、藍色字母且沒有內邊框的表格。
我也試過

table.bordered, tr.bordered, td.bordered { 

無濟於事。 將“class=”放在 tr 標簽上也無濟於事。

我了解到邊框屬性不會被繼承。
DOM 檢查器確認：只有顏色和居中被 td 元素從 the.bordered class 繼承。

我的問題是：

如何在不向每個 td 標簽添加“class=”的情況下獲得單元格的邊框？

（一個用例是如果頁面上有兩個表格，我希望它們的邊框樣式不同）。

Answer 1

只需采用適用於所有表的 css，並在所有表之前添加table.bordered ：

 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>