垂直表头表格的表头与单元格多余空间去除方案咨询

针对你遇到的垂直表头表格中th和td存在多余空白的问题，以下是几种有效的解决思路（已排除单纯重置padding/margin的情况）：

1. 重置浏览器默认表格样式 #

浏览器自带的用户代理样式会给表格元素添加默认内边距和边框间距，先全局重置这些样式：

table {
  border-collapse: collapse; /* 合并边框，消除边框间空白 */
  border-spacing: 0; /* 移除单元格之间的间距 */
}

th.field, td.column {
  padding: 0; /* 彻底清除内边距 */
  margin: 0; /* 明确消除单元格margin（默认虽为0，但显式设置更稳妥） */
}

2. 调整行高与字体属性 #

如果空白来自过大的行高或字体默认行高，可针对性调整：

th.field, td.column {
  line-height: 1; /* 行高与字体大小匹配，消除上下方向空白 */
  font-size: inherit; /* 继承父元素字体大小，避免不必要的高度占用 */
}

3. 覆盖Vuetify框架默认样式（适配你的预览环境） #

由于你使用的是Vuetify框架，它的表格组件自带默认内边距，需强制覆盖：

/* 全局覆盖Vuetify表格单元格样式 */
.v-table th, .v-table td {
  padding: 0 !important;
}

/* 针对自定义类的单元格单独设置 */
th.field, td.column {
  padding: 0;
}

4. 检查HTML内的空白字符 #

确保th和td标签内没有多余的换行、空格等空白字符，避免视觉上的额外空白：

<th class="field">Item id number:</th>
<td class="column">XXX 1234 (Location)</td>

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