JSFiddle - React, Tailwind, and code Playground

by Lalji Tadhani

HTML

<div id="container">
  <div id="table_wrapper">
    <table id="test_table">
      <thead>
        <th id="top_header">No.</th>
        <th id="top_header">asdad.</th>
        <th id="top_header">asdad</th>
      </thead>
      <tbody>
        <tr><th>1</th><td>asdad</td><td>asdad</td></tr>
        <tr><th>2</th><td>asdad</td><td>asdad</td></tr>
        <tr><th>3</th><td>asdad</td><td>asdad</td></tr>
        <tr><th>4</th><td>asdad</td><td>asdad</td></tr>
        <tr><th>5</th><td>asdad</td><td>asdad</td></tr>
        <tr><th>6</th><td>asdad</td><td>asdad</td></tr>
        <tr><th>7</th><td>asdad</td><td>asdad</td></tr>
        <tr><th>8</th><td>asdad</td><td>asdad</td></tr>
        <tr><th>9</th><td>asdad</td><td>asdad</td></tr>
        <tr><th>10</th><td>asdad</td><td>asdad</td></tr>
      </tbody>
    </table>
  </div>
</div>

CSS

#container {
    width: 100%;
    height: 0 auto;
    overflow: auto;
}

#table_wrapper {
    border-bottom: 1px solid #5C6F8C;
    float: none;
    overflow: auto;
    max-height: 80vh;
    width: 80%;
}

#test_table {
    border-collapse: separate;
    border-spacing: 0;
    letter-spacing: 1px;
    font-family: Verdana, Tahoma, Arial, sans-serif;
    font-size: calc(8px + 0.3vw);
    text-align: center;
    width: 100%;
    /*border-bottom: 1px solid #5C6F8C;*/
}

#top_header {
    border: 2px solid #5C6F8C;
    border-right: 0px;
    background-color: #ADBEDA;
    }

caption {
    background-color:white;
}

td, th {
    border: 1px solid #5C6F8C;
    border-right: 0px;
    border-bottom: 0px;
    padding: 5px 10px;
    text-align: left;
}

tbody > tr:first-child > td {
    border-top: 0px;
}

tbody > tr:first-child > th {
    border-top: 0px;
}

th {
    background-color: #ADBEDA;
    }

tr:nth-child(even) {
    background-color: #CFDDF5;
}

tr:nth-child(odd) {
    background-color: #E3ECFD;
}

tr:hover {
    background-color: #F0F5FF;
    text-shadow:0px 0px 0.25px black;
}