如何缩小Vuetify中v-table的列间距并优化紧凑度

要实现表格紧凑、列宽均等的效果，核心是推翻Vuetify默认的自适应列宽逻辑，同时调整内边距压缩空间。以下是具体修改步骤：

1. 开启固定布局，禁用自适应列宽 #

给v-table（或v-data-table）添加fixed-header属性，并通过CSS设置table-layout: fixed——这会强制表格优先使用你定义的列宽，而非根据内容自动拉伸。

2. 强制列宽均等分配 #

通过CSS让所有表头和单元格宽度均分，同时设置较小的内边距来缩减空间。如果是scoped样式，需要用深度选择器（::v-deep）穿透Vuetify的组件样式。

完整代码示例 #

模板部分 #

<v-data-table
  :items="yourItems"
  :headers="yourHeaders"
  fixed-header
  class="compact-equal-table"
></v-data-table>

样式部分 #

/* Scoped样式需加::v-deep，全局样式可省略 */
::v-deep .compact-equal-table .v-data-table__wrapper table {
  table-layout: fixed;
  width: auto; /* 让表格仅占必要宽度，不强制撑满容器 */
}

::v-deep .compact-equal-table .v-data-table__th,
::v-deep .compact-equal-table .v-data-table__td {
  width: 1%; /* 自动均等分配列宽 */
  padding: 4px 6px; /* 大幅减小默认内边距，提升紧凑感 */
  white-space: nowrap; /* 可选：防止内容换行，保持单行紧凑（根据内容调整） */
  text-align: left; /* 可选：统一对齐方式，优化视觉效果 */
}

补充说明 #

• 如果你的列数固定，也可以直接给表头设置精准宽度，比如5列就给每个th加style="width: 20%"，效果更可控。
• 若不需要固定表头，可去掉fixed-header属性，但table-layout: fixed必须保留。
• 如果内容过长导致溢出，可添加text-overflow: ellipsis; overflow: hidden;来显示省略号，保持表格整洁。

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