<div class="horizontal-scroll">
  <table class="my-table"><!-- without scroll class now -->
  ...
  </table>
</div><!-- /horizontal-scroll -->

with CSS:

.horizontal-scroll {
  overflow: hidden;
  overflow-x: auto;
  clear: both;
  width: 100%;
}

.my-table {
  min-width: rem-calc(640);
}

make responsive table with same width percentages?

https://stackoverflow.com/questions/61155096/how-to-make-responsive-table-with-same-width-percentages

https://stackoverflow.com/questions/18436864/how-to-make-responsive-table
https://stackoverflow.com/questions/47077837/html-table-responsive-100-width
https://stackoverflow.com/questions/64706092/making-a-table-responsive-in-html-css
https://www.w3schools.com/css/tryit.asp?filename=trycss_table_fancy