JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>table JS magic</title>
</head>
<body>
  <div>
    <table id="foo">
      <tr>
        <td>lorem 1</td>
        <td>lorem 2</td>
        <td>lorem 3</td>
        <td>lorem 4</td>
        <td>lorem 5</td>
        <td>lorem 6</td>
        <td>lorem 7</td>
        <td>lorem 8</td>
        <td>lorem 9</td>
        <td>lorem 10</td>
        <td>lorem 11</td>
        <td>lorem 12</td>
      </tr>
      <tr>
        <td>lorem 1</td>
        <td>lorem 2</td>
        <td>lorem 3</td>
        <td>lorem 4</td>
        <td>lorem 5</td>
        <td>lorem 6</td>
        <td>lorem 7</td>
        <td>lorem 8</td>
        <td>lorem 9</td>
        <td>lorem 10</td>
        <td>lorem 11</td>
        <td>lorem 12</td>
      </tr>
      <tr>
        <td>lorem 1</td>
        <td>lorem 2</td>
        <td>lorem 3</td>
        <td>lorem 4</td>
        <td>lorem 5</td>
        <td>lorem 6</td>
        <td>lorem 7</td>
        <td>lorem 8</td>
        <td>lorem 9</td>
        <td>lorem 10</td>
        <td>lorem 11</td>
        <td>lorem 12</td>
      </tr>
      <tr>
        <td>lorem 1</td>
        <td>lorem 2</td>
        <td>lorem 3</td>
        <td>lorem 4</td>
        <td>lorem 5</td>
        <td>lorem 6</td>
        <td>lorem 7</td>
        <td>lorem 8</td>
        <td>lorem 9</td>
        <td>lorem 10</td>
        <td>lorem 11</td>
        <td>lorem 12</td>
      </tr>
      <tr>
        <td>lorem 1</td>
        <td>lorem 2</td>
        <td>lorem 3</td>
        <td>lorem 4</td>
        <td>lorem 5</td>
        <td>lorem 6</td>
        <td>lorem 7</td>
        <td>lorem 8</td>
        <td>lorem 9</td>
        <td>lorem 10</td>
        <td>lorem 11</td>
        <td>lorem 12</td>
      </tr>
      <tr>
        <td>lorem 1</td>
        <td>lorem 2</td>
        <td>lorem 3</td>
        <td>lorem 4</td>
        <td>lorem 5</td>
        <td>lorem 6</td>
        <td>lorem 7</td>
        <td>lorem 8</td>
       ...

CSS

div {
  border: 2px solid;
  padding: 1rem;
}

table {
  border: 1px solid blueviolet;
  width: 100%;
}

td {
  border: 1px solid;
}

JavaScript

const tableID = "foo";
const table = document.getElementById(tableID);
const container = table.parentElement;
const tableCells = table.querySelectorAll("tr:first-of-type > td");
//
const styleElement = document.createElement("style");
container.insertBefore(styleElement, table);
//
function css() {
  let i = 1;

  let containerContentWidth = parseInt(
    window.getComputedStyle(container).width,
    10
  );

  for (let cell of tableCells) {
    let offsetRight = cell.offsetLeft + cell.offsetWidth;

    if (offsetRight <= containerContentWidth) {
      i++;
    } else {
      break;
    }
  }

  return "#" + tableID + " td:nth-of-type(n+" + i + "){display:none;}";
}

//
styleElement.innerText = css();
window.onresize = function () {
  styleElement.innerText = "";
  styleElement.innerText = css();
};