Question 45600 in CSS Question posted in
Some basic documentation can be found here.

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

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?

Tags:

2

Answers


  1. 0

    You can add a top border to the table header :

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

    the table header will have a top border, and it will not be lost when scrolling down.

    Login or Signup to reply.
  2. 0

    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 */
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search