Javascript 如何更改vuetify数据表中的字体大小和/或样式？

我有以下代码，用于呈现预期的表：

<v-data-table
    dense
    :headers="table_headers"
    :items="table_data"
    :items-per-page="table_rows"
    :page="table_page"
    :hide-default-footer=true
    :loading="table_loading"
    class="elevation-2"
>
</v-data-table>

在上一次尝试中，我的代码每行呈现的td元素比我预期的多，而且所有列都是空的：

<v-data-table
    dense
    :headers="table_headers"
    :items="table_data"
    :items-per-page="table_rows"
    :page="table_page"
    :hide-default-footer=true
    :loading="table_loading"
    class="elevation-2"
>
    <template v-slot:body="{ items }">
        <tbody>
          <tr v-for="row in items">
            <td v-for="col in row"
                class="display-2">
                {{ col }}
            </td>
          </tr>
        </tbody>
    </template>
</v-data-table>

我做错了什么，有没有更简单的方法

---

顺便说一句：我不是JavaScript开发人员。

如果您没有太多的列，您可以为每个列使用一个插槽，并使用自定义类将它们包装在一个div中，如下所示：

<template v-slot:item.name="{ item }">
   <div class="customStyle">{{ item.name }}</div>
</template>

编辑： 在动态获取列的情况下，您可以像已经尝试过的那样使用主体插槽，但这样您就可以为整个表体定制样式。尝试一下，如下所示，这是未经测试的

<template v-slot:body="{ items }">
  <tr v-for="item in items" :key="item.id" class="customClass">
    <td v-for="col in cols">
      {{ item.col }}
    </td>
  </tr>
</template>

---

“cols”应该是一个列名数组，作为动态获取的字符串。

重要的是不要使用“scoped”样式

    <style>
        .my_class td{
            font-size: small!important;
            height: 0!important;
            padding: 1px!important;
        }
    </style>

v-data-table必须是指定的类“我的类”

    <v-data-table class="my-class" :items="my_output"  >
    </v-data-table>

---

这对我来说很有效，不要使用样式范围

.v-data-table > .v-data-table__wrapper > table > thead > tr > th{
     font-size: 16px !important; 
}

---

谢谢，但我的表列是动态的，因此我无法预测页面上会显示哪些列或其中的多少列。

    <v-data-table class="my-class" :items="my_output"  >
    </v-data-table>

.v-data-table > .v-data-table__wrapper > table > thead > tr > th{
     font-size: 16px !important; 
}