The problem that the internal data of v-data-table is displayed as a single line

If you are using vuetify 2.6.0+, you could define cell class directly in headers array. It will be applied then for each <td> tag in one column.

This way, by example:

<v-data-table
  :headers="headers"
  :items="desserts"
/>
...
data () {
  return {
    headers: [
      {
        text: 'Dessert (100g serving)',
        align: 'start',
        sortable: false,
        value: 'name',
        cellClass: 'width-400'
      },
      { text: 'Calories', value: 'calories' },
      { text: 'Fat (g)', value: 'fat' },
      ...
    ],
    desserts: [
      {
        name: 'Frozen Yogurt',
        calories: 159,
        fat: 6.0,
        ...
      },
      {
        name: 'Ice cream sandwich with a long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long name',
        calories: 237,
        fat: 9.0,
        ...
      },
      ...
    ]
  }
}
...
<style>
.width-400 {
  width: 400px
}
</style>

Test this at CodePen