Html CSS适用于表'；tr'；和'；td'；但是如果我包括'；th'；

我的网站上有一些表格，大部分是无边框的。但我想在一些问题上划定界限。我在CSS中为后者使用类：

table {
  padding: 2px;
  border-collapse: collapse;
  table-layout: auto;
  text-align: center;
  display: block;
}

table.tableAllBorder tr td{
  border-right: solid 1px; 
  border-left: solid 1px;
  border-top: solid 1px; 
  border-bottom: solid 1px;
}

这个很好用。但如果在定义中包含“th”，CSS将失败，如下所示：

table.tableAllBorder tr td th{
  border-right: solid 1px; 
  border-left: solid 1px;
  border-top: solid 1px; 
  border-bottom: solid 1px;
}

理想情况下，我希望在定义表时只包含border=“1”。在这种情况下，我看到一个双边框，远远超出我的表（请参阅所附的屏幕截图）。请给我一些建议

<table border="1">
</table>

和我的html代码：

<div class="div1">
<table border="1"  class="center">
<tr>
 <th> ColA </th>
 <th> ColB </th>
 <th> ColC </th>
 <th> ColD  </th>
 <th> ColE </th>
 <th> ColF </th>
 <th> ColG </th>
 <th> ColH </th>
 </tr>
</table>
</div>

可乐
马驹
可乐
冷的
科尔
科尔夫
科格
科尔赫

不要使用

border=1

。这种标记已经过时，不是语义HTML。使用带有

边框的类：1px纯黑

如果在CSS中包含

th

，则只选择

th

元素。你需要单独上课

table.tableAllBorder tr td {
   /* your original stuff */
}

table.tableAllBorder tr th { /* new selector */ }

我们看不到您的标记，但假设您具有以下合法HTML：

<table class="tableAllBorder">
  <tr>
    <th>Header</th>
    ...
  </tr>
  <tr>
    <td></td>
    ...
  </tr>
  <tr>
    <td></td>
    ...
  </tr>
</table>

标题
...
...
...

你能多分享一点你的表格HTML代码吗？刚刚编辑了我的问题，加入了更多的代码。这很有效。谢谢我试着把一切都放在同一条线上。因此，将您的方法组合为一种：```table.tableAllBorder tr td，table.tableAllBorder tr th{边框右侧：实心1px rgb（var（--color1））；边框左侧：实心1px rgb（var（--color1））；边框顶部：实心1px rgb（var（--color1））；边框底部：实心1px rgb（var（--color1））；}```

<table class="tableAllBorder">
  <tr>
    <th>Header</th>
    ...
  </tr>
  <tr>
    <td></td>
    ...
  </tr>
  <tr>
    <td></td>
    ...
  </tr>
</table>