如何用CSS实现仅隐藏表格首行的左右边框（外层div边框固定）

现有以下HTML结构：

<div class="root">
  <table>
    <tbody>
      <tr class="row1">
        <td>red</td>
        <td>rox</td>
        <td>blanket</td>
      </tr>
      <tr>
        <td>blue</td>
        <td>cat</td>
        <td>potato</td>
      </tr>
      <tr>
        <td>green</td>
        <td>hamster</td>
        <td>Form1040</td>
      </tr>
    </tbody>
  </table>
</div>

固定的外层样式：

.root {
  border: 1px solid gray;
}

需求：在HTML结构和.root样式不可修改的前提下，通过CSS样式仅隐藏表格首行（.row1）对应的左右边框，实现视觉上移除的效果。

以下是几种可应用于.row1的CSS实现方式：

方案1：背景色覆盖边框 #

通过给.row1的首尾单元格设置和容器背景一致的颜色，配合负边距覆盖后方边框：

.row1 td:first-child {
  background-color: white; /* 需与.root的背景色保持一致 */
  margin-left: -1px;
  padding-left: 1px; /* 修正内边距，避免内容偏移 */
}

.row1 td:last-child {
  background-color: white; /* 需与.root的背景色保持一致 */
  margin-right: -1px;
  padding-right: 1px; /* 修正内边距，避免内容偏移 */
}

原理：利用单元格背景色遮挡外层灰色边框，微调边距保证内容位置不受影响。

方案2：阴影模拟覆盖 #

给.row1的首尾单元格添加与背景色一致的阴影，直接覆盖边框区域：

.row1 td:first-child {
  box-shadow: -1px 0 0 white; /* 向左延伸1px的白色阴影，覆盖左侧边框 */
}

.row1 td:last-child {
  box-shadow: 1px 0 0 white; /* 向右延伸1px的白色阴影，覆盖右侧边框 */
}

原理：阴影绘制在元素外部，刚好覆盖后方的灰色边框，无需调整内边距。

方案3：裁剪路径隐藏边框 #

使用clip-path裁剪掉首尾单元格对应的边框区域：

.row1 td:first-child {
  clip-path: inset(0 0 0 1px); /* 裁剪左侧1px区域，隐藏对应边框 */
}

.row1 td:last-child {
  clip-path: inset(0 1px 0 0); /* 裁剪右侧1px区域，隐藏对应边框 */
}

原理：通过inset裁剪规则，将单元格边缘的边框部分裁切掉，视觉上消除外层边框的显示。

方案4：轮廓偏移覆盖（适用于表格无单元格边框场景） #

如果表格本身没有单元格边框，可给.row1设置同背景色的轮廓，配合负偏移覆盖外层边框：

.row1 {
  outline: 1px solid white; /* 颜色与背景色一致 */
  outline-offset: -1px; /* 负偏移让轮廓覆盖外层边框 */
}

原理：轮廓绘制在元素外部，负偏移后刚好覆盖.root的边框，实现隐藏效果。

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