[Vuejs]-Vuetify fixed table headers only work for last header row ( previous ones are hidden on scroll )

by

0👍

In the resource https://cdn.jsdelivr.net/npm/vuetify@3.2.3/dist/vuetify-labs.css there’s a rule that is targeting only the last table row (tr) in the thead.

.v-table--fixed-header > .v-table__wrapper > table > thead > tr > th {
  border-bottom: 0px !important;
  position: sticky;
  top: 0;
}

If you could replicate that rule and assign it to the thead tag that could fix your problem.

thead {
  border-bottom: 0px !important;
  position: sticky;
  top: 0;
}

In other words, you need to make the whole thead sticky, not just the th

Leave a comment