mega file table html css

by Mladen Mihajlovic

HTML

<head>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato">
</head>

<body>


  <div class="grid-wrapper">
    <table width="100%" border="0" cellspacing="0" cellpadding="0" class="grid-table table-hover fm megaListContainer v-fav v-fname v-size v-type v-timeAd v-extras">
      <thead>
        <tr>
          <th></th>
          <th megatype="fav" class="grid-first-th" style="width: 50px;"> <span class="grid-header-star fav"><i class="sprite-fm-mono icon-favourite-filled"></i></span> </th>
          <th megatype="fname" style="width: calc(100vw - 1006px);">
            <div class="arrow name label sprite-fm-mono icon-dropdown desc">Name</div>
            <div class="grid-view-resize">&nbsp;</div>
          </th>
          <th megatype="label" style="width: 80px;">
            <div class="arrow label sprite-fm-mono icon-dropdown">Label</div>
            <div class="grid-view-resize">&nbsp;</div>
          </th>
          <th megatype="size" style="width: 100px;">
            <div class="arrow size sprite-fm-mono icon-dropdown">Size</div>
            <div class="grid-view-resize">&nbsp;</div>
          </th>
          <th megatype="type" style="width: 130px;">
            <div class="arrow type sprite-fm-mono icon-dropdown">Type</div>
            <div class="grid-view-resize">&nbsp;</div>
          </th>
          <th megatype="timeAd" style="width: 130px;">
            <div class="arrow date sprite-fm-mono icon-dropdown">Date added</div>
            <div class="grid-view-resize">&nbsp;</div>
          </th>
          <th megatype="timeMd" style="width: 130px;">
            <div class="arrow mtime sprite-fm-mono icon-dropdown">Last modified</div>
            <div class="grid-view-resize">&nbsp;</div>
          </th>
          <th megatype="versions" style="width: 130px;">
            <div class="arrow versions sprite-fm-mono icon-dropdown">Versions</div>
            <div class="grid-view-resize">&nbsp;</div>
          </th>
          <th...

CSS

body {
  --secondary-blue: rgba(43, 166, 222, var(--secondary-alpha, 1));
  --secondary-green: rgba(29, 176, 123, var(--secondary-alpha, 1));
  --secondary-orange: rgba(255, 166, 0, var(--secondary-alpha, 1));
  --secondary-red: rgba(253, 62, 56, var(--secondary-alpha, 1));
  --secondary-white: rgba(255, 255, 255, var(--secondary-alpha, 1));
  --secondary-grey: rgba(204, 204, 204, var(--secondary-alpha, 1));
  --surface-main: rgba(255, 255, 255, var(--surface-alpha, 1));
  --surface-grey-1: rgba(250, 250, 250, var(--surface-alpha, 1));
  --surface-grey-2: rgba(237, 237, 237, var(--surface-alpha, 1));
  --surface-grey-3: var(--surface-grey-1);
  --surface-grey-4: red;/*rgba(238, 238, 238, var(--surface-alpha, 1));*/
  --surface-grey-5: var(--surface-main);
  --surface-grey-6: var(--surface-grey-2);
  --surface-light-grey: ;
  --surface-mid-grey: rgba(204, 204, 204, var(--surface-alpha, 1));
  --surface-dark-grey: linear-gradient(180deg, rgba(85, 85, 85, var(--surface-alpha, 1)) 0%, rgba(68, 68, 68, var(--surface-alpha, 1)) 100%);
  --surface-black: rgba(0, 0, 0, var(--surface-alpha, 1));
  --surface-black-bar: rgba(0, 0, 0, var(--surface-alpha, 0.7));
  --surface-scrim: rgba(255, 255, 255, var(--surface-alpha, 0.32));
  --surface-warning: linear-gradient(180deg, rgba(255, 210, 0, var(--surface-alpha, 1)) 0%, rgba(255, 165, 0, var(--surface-alpha, 1)) 100%);
  --surface-error: linear-gradient(180deg, rgba(255, 113, 105, var(--surface-alpha, 1)) 0%, rgba(253, 62, 56, var(--surface-alpha, 1)) 100%);
  --surface-error-hover: linear-gradient(180deg, rgba(255, 95, 85, var(--surface-alpha, 1)) 0%, rgba(252, 48, 42, var(--surface-alpha, 1)) 100%);
  --surface-error-active: linear-gradient(180deg, rgba(255, 132, 123, var(--surface-alpha, 1)) 0%, rgba(253, 76, 69, var(--surface-alpha, 1)) 100%);
  --surface-progress-background: linear-gradient(180deg, rgba(85, 85, 85, var(--surface-alpha, 0.3)) 0%, rgba(68, 68, 68, var(--surface-alpha, 0.3)) 100%);
  --surface-overlay:...