<article>
  <p class="data__subtitle">
    Top Active Page
  </p>
  <div class="data__table">
  <table class="table">
    <tr>
      <th>Title</th>
      <th>Link</th>
      <th>Active User (Qty/%)</th>
    </tr>
     <tr>
      <td class="title"><a href="https://finance.detik.com/berita-ekonomi-bisnis/d-5229019/edhy-prabowo-bandingkan-penghasilan-penambak-udang-pns-besar-mana" title="Edhy Prabowo Bandingkan Penghasilan Penambak Udang-PNS, Besar Mana?">Edhy Prabowo Bandingkan Penghasilan Penambak Udang-PNS, Besar Mana?</a></td>
      <td class="link"><a href="https://finance.detik.com/berita-ekonomi-bisnis/d-5229019/edhy-prabowo-bandingkan-penghasilan-penambak-udang-pns-besar-mana">https://finance.detik.com/berita-ekonomi-bisnis/d-5229019/edhy prabowo-bandingkan-penghasilan-penambak-udang-pns-besar-mana</a></td>
      <td>30 / 30%</td>
    </tr>
    <tr>
      <td class="title"><a href="https://finance.detik.com/berita-ekonomi-bisnis/d-5229019/edhy-prabowo-bandingkan-penghasilan-penambak-udang-pns-besar-mana" title="Edhy Prabowo Bandingkan Penghasilan Penambak Udang-PNS, Besar Mana?">Edhy Prabowo Bandingkan Penghasilan Penambak Udang-PNS, Besar Mana?</a></td>
      <td class="link"><a href="https://finance.detik.com/berita-ekonomi-bisnis/d-5229019/edhy-prabowo-bandingkan-penghasilan-penambak-udang-pns-besar-mana">https://finance.detik.com/berita-ekonomi-bisnis/d-5229019/edhy-prabowo-bandingkan-penghasilan-penambak-udang-pns-besar-mana</a></td>
      <td>30 / 30%</td>
    </tr>
    <tr>
      <td class="title"><a href="https://finance.detik.com/berita-ekonomi-bisnis/d-5229019/edhy-prabowo-bandingkan-penghasilan-penambak-udang-pns-besar-mana" title="Edhy Prabowo Bandingkan Penghasilan Penambak Udang-PNS, Besar Mana?">Edhy Prabowo Bandingkan Penghasilan Penambak Udang-PNS, Besar Mana?</a></td>
      <td class="link"><a href="https://finance.detik.com/berita-ekonomi-bisnis/d-5229019/edhy-prabowo-bandingkan-penghasilan-penambak-udang-pns-besar-mana">https://finance.detik.com/berita-ekonomi-bisnis/d-5229019/edhy-prabowo-bandingkan-penghasilan-penambak-udang-pns-besar-mana</a></td>
      <td>30 / 30%</td>
    </tr>
    <tr>
      <td class="title"><a href="https://finance.detik.com/berita-ekonomi-bisnis/d-5229019/edhy-prabowo-bandingkan-penghasilan-penambak-udang-pns-besar-mana" title="Edhy Prabowo Bandingkan Penghasilan Penambak Udang-PNS, Besar Mana?">Edhy Prabowo Bandingkan Penghasilan Penambak Udang-PNS, Besar Mana?</a></td>
      <td class="link"><a href="https://finance.detik.com/berita-ekonomi-bisnis/d-5229019/edhy-prabowo-bandingkan-penghasilan-penambak-udang-pns-besar-mana">https://finance.detik.com/berita-ekonomi-bisnis/d-5229019/edhy-prabowo-bandingkan-penghasilan-penambak-udang-pns-besar-mana</a></td>
      <td>30 / 30%</td>
    </tr>
    <tr>
      <td class="title"><a href="https://finance.detik.com/berita-ekonomi-bisnis/d-5229019/edhy-prabowo-bandingkan-penghasilan-penambak-udang-pns-besar-mana" title="Edhy Prabowo Bandingkan Penghasilan Penambak Udang-PNS, Besar Mana?">Edhy Prabowo Bandingkan Penghasilan Penambak Udang-PNS, Besar Mana?</a></td>
      <td class="link"><a href="https://finance.detik.com/berita-ekonomi-bisnis/d-5229019/edhy-prabowo-bandingkan-penghasilan-penambak-udang-pns-besar-mana">https://finance.detik.com/berita-ekonomi-bisnis/d-5229019/edhy-prabowo-bandingkan-penghasilan-penambak-udang-pns-besar-mana</a></td>
      <td>30 / 30%</td>
    </tr> 
  </table>
  <div class="bottom__link">
      <a href="#">Selengkapnya</a>
  </div>
</div>
</article>

// Mobile
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  
  // Line clamp for focus
  &:focus-visible {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;

    line-height: 27px;
    position: relative;
  }
}

a {
  text-decoration: none;
  font-weight: 500;
  color: #111;
}

html {
  height: 100%;
}

body {
  height: 100%;
  display: grid;
  place-items: center;
}


/* Article  */ 
article {
  width: 95%;
}

/* Subtitle  */ 
.data__subtitle {
  margin: 0.5em 0;
  font-size: 23px;
  font-weight: 700;
  text-transform: uppercase;
}

/* Data Table  */ 
.data__table {
    border: 1px solid #111;  
    background-color: rgba(255, 255, 255, 0.8);
    border-radius: 8px;
    width: 100%;
    min-width: 460px;
    padding: 5px 10px;
}

.table {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
  font-size: 1em;
  
  td, th {
    padding: 8px;
  }
    
  tr:not(:first-child):hover {
    background-color: #eaeaea;
  }
  
  tr:nth-child(2n+1) {
    background-color: #f7f7f7;
  }
  
  td:nth-child(3) {
    text-align: center;
  }
  
  tr:first-child {
    border-bottom: 1px solid #111;
    background-color: unset;
    text-align: left;
    
    th:nth-child(3) {
      text-align: center;
    }
  }
  
  .title a {
    font-weight: 700;
  }
  
    /* 
      Line Clamps size 3 throw ellipsis when overflow
      -- https://css-tricks.com/almanac/properties/l/line-clamp/
    */
    td:nth-child(1), 
    td:nth-child(2),
    td:nth-child(3) {
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
      overflow: hidden;

      line-height: 27px;
      
      text-align: center;
      position: relative;
    }
    
    tr:first-child {
      display: none;  
    }
    tr:not(:nth-child(2)) {
      // border-top: 1px solid #111;
    }
    
    td:nth-child(1):before {
      content: 'Title';
    }
    td:nth-child(2):before {
      content: 'Link';
    }
    td:nth-child(3):before {
      content: 'Active User ';
    }
    td:nth-child(1):before,
    td:nth-child(2):before,
    td:nth-child(3):before {
      font-weight: 700;
      display: block;
      background-color: #d2d2d2;
    }
}

.bottom__link a {
  display: block;
  text-align: center;
  font-weight: 700;
  text-transform: uppercase; 
  padding: 8px;
  border-top: 1px solid #111;
}
.bottom__link a:hover {
  background-color: #eaeaea;
}

// Desktop
@media(min-width: 501px) {
  
  // Line clamp for focus
  *:focus-visible {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;

    line-height: 27px;
    position: relative;
  }
  
  .table {
    /* Reset Table to Default Style */
    tr:first-child,
    tr:not(:nth-child(2)) {
      display: revert;
      border-top: unset;
    }
    
    td:nth-child(1), 
    td:nth-child(2),
    td:nth-child(3) {
        display: revert;
        text-align: revert;
    }
    td:nth-child(3) {
      text-align: center;
    }
    
    td:nth-child(1):before,
    td:nth-child(2):before,
    td:nth-child(3):before {
      all: revert;
    }
    
    /* 
      Line Clamps size 3 throw ellipsis when overflow
      -- https://css-tricks.com/almanac/properties/l/line-clamp/
    */
    td:nth-child(1) a, 
    td:nth-child(2) {
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
      overflow: hidden;

      line-height: 27px;
    }
        
  }
}