使用CSS设置指定表格单线边框，无需为每个td添加class属性

实现方法 #

你可以通过后代选择器限定样式的作用范围，仅匹配带有指定类的表格内部的td/th元素，既不会污染全局样式，也不需要给每个单元格单独加类：

/* 给需要特殊样式的表格定义专属类 */
.bordered-orange {
    border-collapse: collapse;
    text-align: center;
    color: blue;
}
/* 仅匹配上述类对应的表格内部的单元格 */
.bordered-orange td, .bordered-orange th {
    border: 1px solid orange;
}

/* 不同样式的表格可以单独定义其他类，互相完全独立 */
.bordered-gray {
    border-collapse: collapse;
    text-align: left;
}
.bordered-gray td, .bordered-gray th {
    border: 1px solid #ccc;
}

HTML 部分直接给对应表格加类即可，不需要修改tr、td标签：

<!-- 橙色边框表格 -->
<table class="bordered-orange">
    <tr> <td> ABC </td> <td> DEF </td> </tr> 
    <tr> <td> HIJ </td> <td> JLK </td> </tr>
</table>

<!-- 灰色边框表格 -->
<table class="bordered-gray">
    <tr> <td> 测试1 </td> <td> 测试2 </td> </tr> 
    <tr> <td> 测试3 </td> <td> 测试4 </td> </tr>
</table>

之前写法不生效的原因 #

你写的table.bordered, tr.bordered, td.bordered选择器，作用是匹配自身带有bordered类的表格、行、单元格，你没有给tr、td加这个类，自然无法匹配到元素。
而后代选择器的写法bordered-orange td，是匹配所有属于.bordered-orange后代的td元素，不管td本身有没有加类，刚好符合你的需求。

内容的提问来源于stack exchange，提问作者T G