Vuetify: [Bug Report] data table headers are not vertically aligned under different sizes

[craigbroadbear]

Environment

Vuetify Version: 2.2.3
Vue Version: 2.6.11
Browsers: Chrome 79.0.3945.88
OS: Windows 10

Steps to reproduce

Ignore codepen link, to reproduce go to https://vuetifyjs.com/en/components/data-tables

Slowly resize your browser width from full screen to small - you will notice at some point some of the headers are aligned high, some low.

e.g. https://www.screencast.com/t/P2NbdnTU0A6

It can look very messy when you have lots of columns, with some up and some down. e.g. up, down, up up down down up. This is what happens to me most of the time with my tables, its not a one off resize thing like the example I gave.

Expected Behavior

All the headers should be vertically aligned.

Actual Behavior

Headers are not vertically aligned.

Reproduction Link

https://codepen.io/

[craigbroadbear]

Setting a global style of:
th {
vertical-align: top;
}
fixes the issue for me.

[jacekkarczmarczyk]

The problem is that sort icon is moved below the header text if it doesn't fit:

[lxr900]

Also have this issue. This is aggravated if some headers are left aligned and others right aligned. In right-aligned headers the arrow moves at the top, so in a given table the actual header can be on three different heights:

In my case the following in my global css worked:

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

[IsabelMeraner]

In my case the following in my global css worked:

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

this worked for me...
If the screensize is too small, vuetify simply adds a scroll bar in order to view all table headers.