Fixed header of Vuetify table looses border-top CSS on scroll

Question

Currently there is no support for grid lines for Vuetify 3 tables ( https://github.com/vuetifyjs/vuetify/issues/16336 )

So I added them with custom CSS ( reproduction link )

<template>
  <v-app>
    <v-main>
        <v-container>
          <v-table fixed-header height="300px">
            <thead>
              <tr>
                <th>First header</th>
                <th>Second header</th>
                <th>Third header</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="index in 30">
                <td>{{ index }}</td>
                <td>{{ index }}</td>
                <td>{{ index }}</td>
              </tr>
            </tbody>
          </v-table>
        </v-container>
    </v-main>
  </v-app>
</template>

<style>
/* https://github.com/vuetifyjs/vuetify/issues/16336 */
table {
  border: 1px solid rgb(var(--v-border-color), var(--v-border-opacity));
}

table th + th {
  border-left: 1px solid rgb(var(--v-border-color), var(--v-border-opacity));
}

table td + td {
  border-left: 1px solid rgb(var(--v-border-color), var(--v-border-opacity));
}
</style>

which seems to work fine but there is one problem... When scrolling down the fixed header looses the top border.

Do you know how to fix that? Is my CSS incomplete?

Answer 1

You can solve this problem by adding border-top to the th tags.

table th {
  border-top: 1px solid rgb(var(--v-border-color), var(--v-border-opacity))
}

Not over yet... Remove the top border of the table cause It increases the border width.

table {
  margin-top: -1px; /* 1px is the width of the <table> border */
}