init

assets/scss/main.scss

@@ -1,25 +1,3 @@
-//скроллбар
-::-webkit-scrollbar {
-  width: 8px;
-}
-
-::-webkit-scrollbar-track {
-  background: transparent;
-  border-radius: 4px;
-}
-
-::-webkit-scrollbar-thumb {
-  background: rgba(128, 128, 128, 0.5);
-  border-radius: 4px;
-  border: 2px solid transparent;
-  background-clip: padding-box;
-}
-
-::-webkit-scrollbar-thumb:hover {
-  background: rgba(128, 128, 128, 0.7);
-  background-clip: padding-box;
-}
-
 * {
   scrollbar-width: thin;
   scrollbar-color: rgba(128, 128, 128, 0.5) transparent;

components/UiTable.vue

@@ -2,6 +2,7 @@
   <div
     ref="tableContainerRef"
     class="table-wrapper"
+    :style="{ height, width }"
   >
     <div :style="{ height: `${totalSize}px` }">
       <table>
@@ -67,6 +68,8 @@ import { useVirtualizer } from '@tanstack/vue-virtual'
 const props = defineProps<{
   tableData: any[]
   columns: ColumnDef<any>[]
+  height: string
+  width: string
 }>()
 
 const table = useVueTable({
@@ -112,9 +115,7 @@ function measureElement(el?: Element) {
   position: relative;
   margin-top: calc(40px + 10px);
   border-radius: 14px;
-  overflow-y: auto;
-  height: 600px;
-  scrollbar-width: thin;
+  overflow: auto;
 
   @include mobile {
     height: 500px;

pages/index.vue

@@ -11,7 +11,7 @@
       />
     </div>
 
-    <UiTable :table-data="tableData" :columns="columns" />
+    <UiTable :table-data="tableData" :columns="columns" height="600px" width="600px" />
 
     <UserModal v-model:model-value="open" :selected-user="selectedUser" />
   </div>