VTable.css 4.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142
  1. .v-table {
  2. font-size: 0.875rem;
  3. transition-duration: 0.28s;
  4. transition-property: box-shadow, opacity, background, height;
  5. transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  6. }
  7. .v-table {
  8. background: rgb(var(--v-theme-surface));
  9. color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
  10. }
  11. .v-table .v-table-divider {
  12. border-right: thin solid rgba(var(--v-border-color), var(--v-border-opacity));
  13. }
  14. .v-table .v-table__wrapper > table > thead > tr > th {
  15. border-bottom: thin solid rgba(var(--v-border-color), var(--v-border-opacity));
  16. }
  17. .v-table .v-table__wrapper > table > tbody > tr:not(:last-child) > td,
  18. .v-table .v-table__wrapper > table > tbody > tr:not(:last-child) > th {
  19. border-bottom: thin solid rgba(var(--v-border-color), var(--v-border-opacity));
  20. }
  21. .v-table .v-table__wrapper > table > tfoot > tr > td,
  22. .v-table .v-table__wrapper > table > tfoot > tr > th {
  23. border-top: thin solid rgba(var(--v-border-color), var(--v-border-opacity));
  24. }
  25. .v-table.v-table--hover > .v-table__wrapper > table > tbody > tr > td {
  26. position: relative;
  27. }
  28. .v-table.v-table--hover > .v-table__wrapper > table > tbody > tr:hover > td::after {
  29. background: rgba(var(--v-border-color), var(--v-hover-opacity));
  30. pointer-events: none;
  31. }
  32. .v-table.v-table--hover > .v-table__wrapper > table > tbody > tr:hover > td::after {
  33. content: "";
  34. position: absolute;
  35. top: 0;
  36. left: 0;
  37. width: 100%;
  38. height: 100%;
  39. }
  40. .v-table.v-table--fixed-header > .v-table__wrapper > table > thead > tr > th {
  41. background: rgb(var(--v-theme-surface));
  42. box-shadow: inset 0 -1px 0 rgba(var(--v-border-color), var(--v-border-opacity));
  43. z-index: 1;
  44. }
  45. .v-table.v-table--fixed-footer > tfoot > tr > th,
  46. .v-table.v-table--fixed-footer > tfoot > tr > td {
  47. background: rgb(var(--v-theme-surface));
  48. box-shadow: inset 0 1px 0 rgba(var(--v-border-color), var(--v-border-opacity));
  49. }
  50. .v-table {
  51. border-radius: inherit;
  52. line-height: 1.5;
  53. max-width: 100%;
  54. display: flex;
  55. flex-direction: column;
  56. }
  57. .v-table > .v-table__wrapper > table {
  58. width: 100%;
  59. border-spacing: 0;
  60. }
  61. .v-table > .v-table__wrapper > table > tbody > tr > td,
  62. .v-table > .v-table__wrapper > table > tbody > tr > th,
  63. .v-table > .v-table__wrapper > table > thead > tr > td,
  64. .v-table > .v-table__wrapper > table > thead > tr > th,
  65. .v-table > .v-table__wrapper > table > tfoot > tr > td,
  66. .v-table > .v-table__wrapper > table > tfoot > tr > th {
  67. padding: 0 16px;
  68. transition-duration: 0.28s;
  69. transition-property: box-shadow, opacity, background, height;
  70. transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  71. }
  72. .v-table > .v-table__wrapper > table > tbody > tr > td,
  73. .v-table > .v-table__wrapper > table > thead > tr > td,
  74. .v-table > .v-table__wrapper > table > tfoot > tr > td {
  75. height: var(--v-table-row-height);
  76. }
  77. .v-table > .v-table__wrapper > table > tbody > tr > th,
  78. .v-table > .v-table__wrapper > table > thead > tr > th,
  79. .v-table > .v-table__wrapper > table > tfoot > tr > th {
  80. height: var(--v-table-header-height);
  81. font-weight: 500;
  82. user-select: none;
  83. text-align: start;
  84. }
  85. .v-table--density-default {
  86. --v-table-header-height: 56px;
  87. --v-table-row-height: 52px;
  88. }
  89. .v-table--density-comfortable {
  90. --v-table-header-height: 48px;
  91. --v-table-row-height: 44px;
  92. }
  93. .v-table--density-compact {
  94. --v-table-header-height: 40px;
  95. --v-table-row-height: 36px;
  96. }
  97. .v-table__wrapper {
  98. border-radius: inherit;
  99. overflow: auto;
  100. flex: 1 1 auto;
  101. }
  102. .v-table--has-top > .v-table__wrapper > table > tbody > tr:first-child:hover > td:first-child {
  103. border-top-left-radius: 0;
  104. }
  105. .v-table--has-top > .v-table__wrapper > table > tbody > tr:first-child:hover > td:last-child {
  106. border-top-right-radius: 0;
  107. }
  108. .v-table--has-bottom > .v-table__wrapper > table > tbody > tr:last-child:hover > td:first-child {
  109. border-bottom-left-radius: 0;
  110. }
  111. .v-table--has-bottom > .v-table__wrapper > table > tbody > tr:last-child:hover > td:last-child {
  112. border-bottom-right-radius: 0;
  113. }
  114. .v-table--fixed-height > .v-table__wrapper {
  115. overflow-y: auto;
  116. }
  117. .v-table--fixed-header > .v-table__wrapper > table > thead {
  118. position: sticky;
  119. top: 0;
  120. z-index: 2;
  121. }
  122. .v-table--fixed-header > .v-table__wrapper > table > thead > tr > th {
  123. border-bottom: 0px !important;
  124. }
  125. .v-table--fixed-footer > .v-table__wrapper > table > tfoot > tr {
  126. position: sticky;
  127. bottom: 0;
  128. z-index: 1;
  129. }
  130. .v-table--fixed-footer > .v-table__wrapper > table > tfoot > tr > td,
  131. .v-table--fixed-footer > .v-table__wrapper > table > tfoot > tr > th {
  132. border-top: 0px !important;
  133. }