Table that works everywhere

Table.vue

<template>
  <v-row no-gutters>
    <v-col v-if="tableLength > 0" cols="12" style="width: 100%;overflow: auto;">
      <div dir="rtl" role="table">
        <slot name="header"></slot>
        <slot name="body"></slot>
      </div>
    </v-col>
    <v-col v-else>
      <div style="width:100%;margin:0 auto">
        <NotFound/>
      </div>
    </v-col>
  </v-row>
</template>

<script>
import NotFound from '@/components/Utility/NotFound'

export default {
  name: "Table",
  components: {
    NotFound,
  },
  props: {
    tableLength: {
      type: Number,
      default: 0
    }
  }
};
</script>

<style>
[role="table"] {
  display: table;
  border-radius: 4px;
  width: 100%;
  min-width: 1175px;
  margin: 0 auto;
  overflow: auto;
  table-layout: auto;
  border-collapse: separate;
  border-spacing: 0;
  box-sizing: border-box;
}

[role="table"] > div[id] {
  display: table-caption;
  font-style: italic;
}

[role="table"] [role="row"] {
  display: table-row;
}

[role="table"] [role="cell"],
[role="table"] [role="columnheader"] {
  display: table-cell;
  padding: 0.5em .8em;
  text-align: right;
}

[role="row"]:hover {
  background: #eee;
  cursor: pointer;
}

[role="table"] [role="columnheader"] {
  font-weight: 300;
  font-size: 14px;
  border-bottom: thin solid rgba(0, 0, 0, 0.1);
  color: rgba(0, 0, 0, 0.6);
  background: #fff;
  width: fit-content;
  block-size: fit-content;
  white-space: nowrap;
}

[role="table"] [role="cell"] {
  font-size: 13px;
  border-bottom: thin solid rgba(0, 0, 0, 0.1);
  min-height: 25px;
  width: fit-content;
  block-size: fit-content;
  overflow: hidden;
  -ms-text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  vertical-align: middle;

  white-space: nowrap;
}

[role="cell"]:last-child {
  pointer-events: none;
}
</style>