<table>
  <tr>
    <th>Col 1</th>
    <th>Col 2</th>
    <th>Col 3</th>
    <th>Col 4</th>
    <th>Col 5</th>
  </tr>
  <tr>
    <td data-column="Col 1">Text test test test test test test test test test </td>
    <td data-column="Col 2">Text test test test test test test test test test </td>
    <td data-column="Col 3">Text test test test test test test test test test </td>
    <td data-column="Col 4">Text test test test test test test test test test </td>
    <td data-column="Col 5">Text test test test test test test test test test </td>
  </tr>
</table>  
    

table, tr, td { border: 1px solid red;}

@media (max-width: 100ch) {
  table, tr, td { border-color: transparent;}
tr {
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
  th { display:none;}
  td:before {
    content: attr(data-column);
    display: block;
    font-weight: bold;
    padding-block-end: .5rem;
  }
}

/*
In response to
https://www.sitepoint.com/community/t/can-html-tables-of-about-five-columns-or-more-be-responsive-or-will-there-always-be-a-horizontal-scrolling-for-webpages-containing-such-html-tables-in-mobile-display/462839
*/