JSFiddle - React, Tailwind, and code Playground

by Amin Kodaganur

HTML

<table border="1" width="100%">
  <tr class="hover">
    <td> Name_____ </td>
    <td class="defalut"> - 2.66 </td>
    <td class="defalut"> 175.40 </td>
    
    <td class="showOnHover">
      <button>B</button>
    </td>
    <td class="showOnHover">
      <button>S</button>
     </td>
    <td class="showOnHover">
      <button>1</button>
    </td>
    <td class="showOnHover">
      <button>2</button>
    </td>
  </tr>
</table>

CSS

.defalut {
  display: table-cell;
}

.showOnHover {
  display: none;
}

.hover:hover .defalut {
  display: none;
}
.hover:hover .showOnHover {
  display: table-cell;
}