JSFiddle - React, Tailwind, and code Playground

by josekerekes

HTML

<table>
  <tr>
      <td>hello 1</td>
       <td>hello 2</td>
        <td>hello 3</td>
  </tr>
   <tr>
      <td>hello 1</td>
       <td>hello 2</td>
        <td>hello 3</td>
  </tr>
   <tr>
      <td>hello 1</td>
       <td>hello 2</td>
        <td>hello 3</td>
  </tr>
   <tr>
      <td>hello 1</td>
       <td>hello 2</td>
        <td>hello 3</td>
  </tr>
</table>

CSS

table {
  overflow:hidden;  
  border-collapse: collapse;
  border-spacing:0
}
td {padding:20px;position:relative}
tr:hover td {background:yellow;color:red}
tr td:hover:before {
  position:absolute;
  top:50%;
  left:0;
  height:10000px;
  margin-top:-5000px;
  content:'';
  background:yellow;
  width:100%;
  z-index:-1;


}