vuetify/lib/components/VTable/VTable.css

Vue Material Component Framework

.v-table {
  background: rgb(var(--v-theme-surface));
  color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
}
.v-table .v-table-divider {
  border-right: thin solid rgba(var(--v-border-color), var(--v-border-opacity));
}
.v-table .v-table__wrapper > table > thead > tr > th {
  border-bottom: thin solid rgba(var(--v-border-color), var(--v-border-opacity));
  color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity));
}
.v-table .v-table__wrapper > table > tbody > tr:not(:last-child) > td,
.v-table .v-table__wrapper > table > tbody > tr:not(:last-child) > th {
  border-bottom: thin solid rgba(var(--v-border-color), var(--v-border-opacity));
}
.v-table .v-table__wrapper > table > tfoot > tr > td,
.v-table .v-table__wrapper > table > tfoot > tr > th {
  border-top: thin solid rgba(var(--v-border-color), var(--v-border-opacity));
}
.v-table.v-table--hover > .v-table__wrapper > table > tbody > tr:hover {
  background: rgba(var(--v-border-color), var(--v-hover-opacity));
}
.v-table.v-table--fixed-header > .v-table__wrapper > table > thead > tr > th {
  background: rgb(var(--v-theme-surface));
  box-shadow: inset 0 -1px 0 rgba(var(--v-border-color), var(--v-border-opacity));
  z-index: 1;
}
.v-table.v-table--fixed-footer > tfoot > tr > th,
.v-table.v-table--fixed-footer > tfoot > tr > td {
  background: rgb(var(--v-theme-surface));
  box-shadow: inset 0 1px 0 rgba(var(--v-border-color), var(--v-border-opacity));
}

.v-table {
  --v-table-header-height: 56px;
  border-radius: inherit;
  line-height: 1.5;
  max-width: 100%;
}
.v-table > .v-table__wrapper > table {
  width: 100%;
  border-spacing: 0;
}
.v-table > .v-table__wrapper > table > tbody > tr > td,
.v-table > .v-table__wrapper > table > tbody > tr > th,
.v-table > .v-table__wrapper > table > thead > tr > td,
.v-table > .v-table__wrapper > table > thead > tr > th,
.v-table > .v-table__wrapper > table > tfoot > tr > td,
.v-table > .v-table__wrapper > table > tfoot > tr > th {
  padding: 0 16px;
  transition: height cubic-bezier(0.4, 0, 0.2, 1);
}
.v-table > .v-table__wrapper > table > tbody > tr > th,
.v-table > .v-table__wrapper > table > thead > tr > th,
.v-table > .v-table__wrapper > table > tfoot > tr > th {
  font-weight: 500;
  user-select: none;
  text-align: start;
}
.v-table--density-default > .v-table__wrapper > table > tbody > tr > th,
.v-table--density-default > .v-table__wrapper > table > thead > tr > th,
.v-table--density-default > .v-table__wrapper > table > tfoot > tr > th {
  height: calc(var(--v-table-header-height) + 0px);
}
.v-table--density-default > .v-table__wrapper > table > tbody > tr > td,
.v-table--density-default > .v-table__wrapper > table > thead > tr > td,
.v-table--density-default > .v-table__wrapper > table > tfoot > tr > td {
  height: calc(var(--v-table-row-height, 52px) + 0px);
}

.v-table--density-comfortable > .v-table__wrapper > table > tbody > tr > th,
.v-table--density-comfortable > .v-table__wrapper > table > thead > tr > th,
.v-table--density-comfortable > .v-table__wrapper > table > tfoot > tr > th {
  height: calc(var(--v-table-header-height) - 8px);
}
.v-table--density-comfortable > .v-table__wrapper > table > tbody > tr > td,
.v-table--density-comfortable > .v-table__wrapper > table > thead > tr > td,
.v-table--density-comfortable > .v-table__wrapper > table > tfoot > tr > td {
  height: calc(var(--v-table-row-height, 52px) - 8px);
}

.v-table--density-compact > .v-table__wrapper > table > tbody > tr > th,
.v-table--density-compact > .v-table__wrapper > table > thead > tr > th,
.v-table--density-compact > .v-table__wrapper > table > tfoot > tr > th {
  height: calc(var(--v-table-header-height) - 16px);
}
.v-table--density-compact > .v-table__wrapper > table > tbody > tr > td,
.v-table--density-compact > .v-table__wrapper > table > thead > tr > td,
.v-table--density-compact > .v-table__wrapper > table > tfoot > tr > td {
  height: calc(var(--v-table-row-height, 52px) - 16px);
}

.v-table__wrapper {
  border-radius: inherit;
  overflow: auto;
}

.v-table--has-top > .v-table__wrapper > table > tbody > tr:first-child:hover > td:first-child {
  border-top-left-radius: 0;
}
.v-table--has-top > .v-table__wrapper > table > tbody > tr:first-child:hover > td:last-child {
  border-top-right-radius: 0;
}

.v-table--has-bottom > .v-table__wrapper > table > tbody > tr:last-child:hover > td:first-child {
  border-bottom-left-radius: 0;
}
.v-table--has-bottom > .v-table__wrapper > table > tbody > tr:last-child:hover > td:last-child {
  border-bottom-right-radius: 0;
}

.v-table--fixed-height > .v-table__wrapper {
  overflow-y: auto;
}

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

.v-table--fixed-footer > .v-table__wrapper > table > tfoot > tr > td,
.v-table--fixed-footer > .v-table__wrapper > table > tfoot > tr > th {
  border-top: 0px !important;
  position: sticky;
  bottom: 0;
}