看看这是否有帮助：
根据CSS指南，这是border-collapse的一个定义行为。
如果折叠边框具有相同的样式和宽度，但颜色不同，则从最常用到最不常用：单元格、行、行组、列、列组、表。
如果来自相同类型的元素，例如两行，则颜色取自最顶部和最左侧的边框。

table {
  margin: auto;
}

td {
  padding: 10px;
}

td.dark {
  border: 8px solid black;
}

td.light {
  border: 8px solid lightgrey;
}

<table>
  <tr>
    <td class="light"> a </td>
    <td class="light">b</td>
  </tr>
  <tr>
    <td class="light"> a </td>
    <td class="dark">b</td>
  </tr>
</table>

<br>

<table>
  <tr>
    <td class="dark"> a </td>
    <td class="light">b</td>
  </tr>
  <tr>
    <td class="light"> a </td>
    <td class="light">b</td>
  </tr>
</table>

<br>

<table>
  <tr>
    <td class="light"> a </td>
    <td class="dark">b</td>
  </tr>
  <tr>
    <td class="light"> a </td>
    <td class="light">b</td>
  </tr>
</table>

<br>

<table>
  <tr>
    <td class="light"> a </td>
    <td class="light">b</td>
  </tr>
  <tr>
    <td class="dark"> a </td>
    <td class="light">b</td>
  </tr>
</table>

或者，您可以为每个行<td>元素设置自己的<td>样式。

• border-collapse mechanism * 妨碍了这个操作。最简单的解决方案是使用绝对定位的::before或::after以及border或box-shadow来创建边界。

该代码片段显示了两种::after解决方案。
注意：

• 由于border-collapse，类.dark仍然需要一个border，但是它的颜色是无关紧要的，因为它将被我们的自定义边框覆盖
• ::before或::after将覆盖表格单元格的内容，使用户很难（但并非不可能）选择内容。
• • 片段**

body { display: flex; flex-flow: row wrap; gap: 2rem; justify-content: center }

table { border-collapse: collapse; margin:auto }
td    { padding: 10px }

/* still need .dark border to trigger border collapse */
td.dark  { border: 8px solid black } /* color is irrelevant */
td.light { border: 8px solid lightgrey }

/* Solutions */

/* ::before/::after will overlay the table cell, this may be unwanted behavior     */
td:is(.s1,.s2)::after { background-color: CornSilk } /* to show overlay of ::after */
/* Just disable this rule, remove it or use 'transparent' as color value */

:is(.s1,.s2).dark        { position: relative }            /* new stacking context */
:is(.s1,.s2).dark::after { position: absolute; content: '' }  /* relative to .dark */

/* Solution 1, using 'border' */
td.dark.s1::after {
    inset: -8px; /* shorthand for top: -8px; right: -8px; bottom: -8px; left: -8px; */
    border: 8px solid black
}

/* Solution 2, using 'box-shadow' */
td.dark.s2::after {
    inset: 0; /* shorthand for top: 0; right: 0; bottom: 0; left: 0; */
    box-shadow: 0 0 0 8px black
}

<table>
<tr> <td class="light"> a </td> <td class="light">b</td> </tr>
<tr> <td class="light"> a </td> <td class="dark">b</td> </tr>
</table>

<table>
<tr> <td class="dark"> a </td> <td class="light">b</td> </tr>
<tr> <td class="light"> a </td> <td class="light">b</td> </tr>
</table>

<table>
<tr> <td class="light"> a </td> <td class="dark s1">b</td> </tr>
<tr> <td class="light"> a </td> <td class="light">b</td> </tr>
</table>

<table>
<tr> <td class="light"> a </td> <td class="light">b</td> </tr>
<tr> <td class="dark s2"> a </td> <td class="light">b</td> </tr>
</table>