Lösungsvorschlag mit window.onresize

[djr]

Umsetzung meiner obigen Idee, aber richtigerweise mit dem resize-Event.

<div> <!-- container -->
  <table id="foo">
    <tr>
      <td>lorem</td>
      <!-- ... -->
    </tr>
  </table>
</div>

Der Container kann padding und border haben, denn das Script berücksichtigt diese.

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

table {
  width: 100%;
}

Anmerkung: Nur im Firefox 81.0 ((64-Bit) auf Windows) getestet.

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();
};