如何调整Vuetify数据表格的单元格内边距？

一、Vuetify原生属性方案 #

利用数据表格的cell-class属性直接给所有单元格绑定自定义类，无需冗长的CSS选择器：

1. 在模板中配置cell-class：

<v-data-table
  :items="yourItemsData"
  cell-class="custom-table-cell"
  <!-- 其他表格属性（如列定义、可展开行等）保持不变 -->
></v-data-table>

2. 添加自定义样式：

<style scoped>
.custom-table-cell {
  padding: 0 4px !important; /* 按需调整上下/左右内边距数值 */
}
</style>

注：使用!important是因为Vuetify内置样式优先级较高，确保自定义样式能覆盖默认值；如果不使用scoped可以省略!important，但推荐保留scoped避免全局样式污染。

二、简洁CSS选择器方案 #

直接针对Vuetify单元格的专属类编写样式，比你之前的多层选择器简洁得多：

<style>
.v-data-table__td, .v-data-table__th {
  padding: 0 4px;
}
</style>

这个方案直接选中所有数据表格的单元格（包括表头和内容行），无需额外配置模板属性，适合快速调整全局样式。

为什么你最初的方案失效？ #

你之前写的.custom-cell-padding > tbody > tr > td选择器优先级低于Vuetify内置的.v-data-table__td类样式，而且如果没有给<v-data-table>添加custom-cell-padding类，样式根本不会作用到目标元素上。

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