css - 绑定(bind) Vuetify 数据表的样式，以便排序箭头始终与标题位于同一行 - 而不是在下方？

Question

在Vuetify数据表中，表头较长时，表头下方会出现排序箭头。我试图让标题中的排序箭头始终出现在与标题相同的行上。

这是我的数据表:

<v-data-table
      :headers="headers"[![enter image description here][2]][2]
      :items="truncatedRows"
      :items-per-page="5"
      class="elevation-1"
 ></v-data-table>

我得到了什么:

无论 header 的长度如何，我都想要:

Answer 1

.v-data-table-header th {
  white-space: nowrap;
}

https://github.com/vuetifyjs/vuetify/issues/10164