JSFiddle - React, Tailwind, and code Playground

by Anshul Pandey

HTML

<table cellspacing="0" cellpadding="0">
<thead>
  <tr>
    <th>Country</th>
    <th>Device</th>
    <th>Measure 1</th>
    <th>Measure 2</th>
    <th>Measure 3</th>
    <th>Measure 4</th>
    <th>Measure 5</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td>USA</td>
    <td>Desktop</td>
    <td>982375</td>
    <td>29834</td>
    <td>09458</td>
    <td>28397432</td>
    <td>23840709</td>
  </tr>
  <tr>
    <td class="dup"><span>USA</span></td>
    <td>Mobile</td>
    <td>982375</td>
    <td>29834</td>
    <td>09458</td>
    <td>28397432</td>
    <td>23840709</td>
  </tr>
  <tr>
    <td class="dup"><span>USA</span></td>
    <td>Tablet</td>
    <td>982375</td>
    <td>29834</td>
    <td>09458</td>
    <td>28397432</td>
    <td>23840709</td>
  </tr>
  <tr>
    <td>Canada</td>
    <td>Desktop</td>
    <td>982375</td>
    <td>29834</td>
    <td>09458</td>
    <td>28397432</td>
    <td>23840709</td>
  </tr>
  <tr>
    <td class="dup"><span>Canada</span></td>
    <td>Mobile</td>
    <td>982375</td>
    <td>29834</td>
    <td>09458</td>
    <td>28397432</td>
    <td>23840709</td>
  </tr>
  <tr>
    <td class="dup"><span>Canada</span></td>
    <td>Tablet</td>
    <td>982375</td>
    <td>29834</td>
    <td>09458</td>
    <td>28397432</td>
    <td>23840709</td>
  </tr>
</tbody>

</table>

SCSS

table{
      border-collapse: collapse;
  thead{
    th{
      background: #ccc;
      color:#333;
      padding:10px;
      border:1px solid #999;

    }
  }
  tbody{
    td{
      padding:10px;
      border-right:1px solid #999;
      border-bottom:1px solid #999;
      text-align:right;
      background: #fff;
      &:first-child{
        border-left:1px solid #999;
        &:not(.dup){
          border-top:1px solid #999;
          border-bottom:0 none;
        }
      }
      &:first-child,&:nth-child(2){
        text-align:left;
      }
      &.dup{
        span{
          visibility:hidden;
        }
        border-bottom: 0 none;
      }
    }
    tr{
      &:last-child{
        td{
          &.dup{
            border-bottom:1px solid #999;
          }
        }
      }
      &:hover{
        td{
          background: #fdfdbf;
          &:first-child{
            border-bottom:1px solid #999;
            border-top:1px solid #999;
            span{
              visibility:visible;
            }
          }
        }
      }
    }
  }
}