【Vue.js】Vuetifyのv-data-tableの改行をCSSでやめさせる

概要

以下、Vue.jsのUIライブラリであるVuetifyの話です。
v-data-tableの見た目を力技で顧客要望にできるだけ近づけようとしていた時のメモ。

v-data-tableでは、テーブルのヘッダーのやデータの値が長かったり記号まじりだったりすると、ウィンドウの横幅に応じて勝手に適宜改行してくれます。
ただ改行すると縦に伸びるわけで、それは嫌だという要望に対処します。
以下の記載は単純なCSSでの記載なので適宜環境に合わせてください。

方法

テーブル全体に強制したい

テーブル全体

<style scoped>
.v-data-table {
  white-space : nowrap;
}
</style>

ヘッダーだけに強制したい

テーブル全体

<style scoped>
.v-data-table th {
  white-space : nowrap;
}
</style>

データ行だけに強制したい

テーブル全体

<style scoped>
.v-data-table td {
  white-space : nowrap;
}
</style>

やっていることは全部同じですね。
強制した範囲に応じてCSSを書いてあげればいい形です。

もし１つの.vueファイルの中に2つのv-data-tableがあって、その片方にだけ適用したい場合は以下です。

テーブル全体

<template>
  <v-data-table
    :headers="headers"
    :items="desserts"
    class="myTable-1"
  ></v-data-table>
  <v-data-table
    :headers="headers2"
    :items="desserts2"
    class="myTable-2"
  ></v-data-table>
</template>
<style scoped>
myTable-1.v-data-table {
  white-space : nowrap;
}
</style>

当然white-spaceにnowrap以外のものも指定できるので、
各位の使用にあわせて読み替えていただければと思います。