JSFiddle - React, Tailwind, and code Playground

by Katarn

HTML

<div>
  <table>
    <tr>
      <td>Hola<a href="#">Enalce</a></td>
      <td>5</td>
      <td>Adios</td>
      <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tempor porta turpis at viverra. In a turpis ac diam aliquam gravida non quis turpis. Ut accumsan at turpis eleifend molestie. Nam nec tempor dolor, id tempus massa. Duis sit amet dignissim neque. Aenean turpis sem, suscipit ac tempor sit amet, gravida eu augue. Donec et dolor vitae felis semper mattis a vitae mauris. Duis eu metus eu est bibendum posuere. Suspendisse suscipit augue a orci dictum, a viverra orci convallis. Morbi justo orci, tincidunt in iaculis et, vehicula quis quam.</td>
    </tr>
    <tr>
      <td>Hellow<a href="#">Enalce</a></td>
      <td>3</td>
      <td>Bye</td>
      <td>Sed condimentum dolor vitae neque mattis, eu aliquam magna scelerisque. Nulla facilisi. Aenean at purus pretium dolor aliquam pulvinar. Fusce at nibh ultrices, malesuada diam vitae, dignissim ex. Maecenas a nisi nec leo laoreet facilisis non ut est. Aenean a varius nisl. Nullam odio orci, egestas sit amet tellus id, vehicula auctor arcu. Vestibulum consequat eu justo quis ornare. Etiam mattis urna non rutrum auctor. Morbi efficitur lectus quis mauris lacinia semper. Nullam vehicula lacus vitae nulla tempor, in pretium dolor laoreet.</td>
    </tr>
  </table>
</div>

SCSS

table {
  width: 100%;
}

div {
  width: 100vw;
  overflow: auto hidden;
}

tr {
  position: relative;
  
  &:hover, &:focus {
    background: red;
  }
}

a {
  position: absolute;
  inset: 0;
  border: solid red 1px;
}

td {
  white-space: nowrap;
}