JSFiddle - React, Tailwind, and code Playground

by Chris LaFrombois

HTML

<table>
   <tr style="--rowCount: 0px">
     <td>One</td>
     <td>Two</td>
     <td>Three</td>
   </tr>
   <tr style="--rowCount: -1px">
     <td>One</td>
     <td>Two</td>
     <td>Three</td>
   </tr>
   <tr style="--rowCount: -2px">
     <td>One</td>
     <td>Two</td>
     <td>Three</td>
   </tr>
   <tr style="--rowCount: -3px">
     <td>One</td>
     <td>Two</td>
     <td>Three</td>
   </tr>
 </table>

CSS

table {
  border-collapse: separate;
  border-spacing: 0;
}


tr {
  position: relative;
  z-index:1;
  top: var(--rowCount);
}




td {
  border: solid 1px black;
  border-style: solid none;
  padding: 10px;
}

td:first-child {
  border-left-style: solid;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}

td:last-child {
  border-right-style: solid;
  border-bottom-right-radius: 10px;
  border-top-right-radius: 10px;
}

tr:last-child td {
  border-bottom: solid 1px black;
}

tr:hover {
  /*background-color: #cad6ed;*/
  z-index: 5;
}

tr:hover td {
  border-color: #12A0F8;
  border-style: solid none;
  padding: 10px;
}

tr:hover td:first-child {
  border-left-style: solid;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}

tr:hover td:last-child {
  border-right-style: solid;
  border-bottom-right-radius: 10px;
  border-top-right-radius: 10px;
}