如何让Vuetify HTML表格实现全边框？解决rowspan边框加粗问题

我在Vue项目中使用Vuetify表格，由于官方暂不支持边框样式，因此通过自定义CSS补充边框，但遇到了问题：当单元格设置rowspan大于1时，其底部边框会出现视觉上的加粗效果。

原问题代码 #

<template>
  <v-app>
    <v-main>
      <v-table>
        <thead>
          <tr>
            <th>Col 1</th>
            <th>Col 2</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(row, rowIndex) in tableMatrix" :key="rowIndex">
            <template v-for="(cell, columnIndex) in row" :key="columnIndex">
              <td v-if="cell.isCoveredByPreviousCell" class="d-none" />
              <td v-else :rowspan="cell.rowspan">
                <template v-if="cell.content">
                  {{ cell.content }}
                </template>
              </td>
            </template>
          </tr>
        </tbody>
      </v-table>
    </v-main>
  </v-app>
</template>

<script setup lang="ts">
import { ref, Ref } from 'vue';

interface Cell { isCoveredByPreviousCell: boolean; rowspan: number; content?: string; }

type TableMatrix = Cell[][];

const childCell: Cell = { isCoveredByPreviousCell: false, rowspan: 1, content: "cell with rowspan 1" };

const tableMatrix: Ref<TableMatrix> = ref([
  [{ isCoveredByPreviousCell: false, rowspan: 2, content: "cell with rowspan 2" },{ ...childCell }],
  [{ isCoveredByPreviousCell: true, rowspan: 1, content: "covered by parent" },{ ...childCell }],
  [{ ...childCell },{ ...childCell }],
  [{ ...childCell }, { isCoveredByPreviousCell: false, rowspan: 2, content: "cell with rowspan 2" }],
  [{ ...childCell }, { isCoveredByPreviousCell: true, rowspan: 1, content: "covered by parent" }],
  [{ isCoveredByPreviousCell: false, rowspan: 2, content: "cell with rowspan 2" },{ ...childCell }],
  [{ isCoveredByPreviousCell: true, rowspan: 1, content: "covered by parent" },{ ...childCell }],
])
</script>

<style>
table { border: 1px solid #e6e6e6; }
  
table th { border-top: 1px solid #e6e6e6; }

table th + th { border-left: 1px solid #e6e6e6; }

table td + td { border-left: 1px solid #e6e6e6; }
</style>

问题原因 #

边框加粗的核心原因是：rowspan单元格的底部边框与下方行对应单元格的顶部边框发生重叠，两个1px边框叠加后视觉上呈现2px效果，看起来像是加粗。

修复方案 #

修改自定义CSS，通过边框合并和统一单元格边框设置解决重叠问题：

table {
  border-collapse: collapse; /* 合并相邻单元格边框，避免叠加 */
  border: 1px solid #e6e6e6;
}

table th, table td {
  border: 1px solid #e6e6e6; /* 给所有表头和单元格统一设置边框 */
}

/* 移除隐藏单元格的边框，避免干扰布局 */
table td.d-none {
  border: none;
}

说明 #

1. border-collapse: collapse：让表格边框合并为单一边框，从根本上解决相邻边框叠加的问题。
2. 统一设置th和td边框：替代原来零散的border-top、border-left规则，确保所有单元格边框样式一致。
3. 移除d-none单元格边框：这类单元格本身处于隐藏状态，保留边框会影响合并后的边框布局。

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