SO 70209819

Table breaks on Firefox

by jado66

HTML

<body>
  <div class="layout">
    <div class="table-wrap">
      <table>
        <thead>
          <tr>
            <th>Col 1</th>
            <th>Col 2</th>
            <th>Col 3</th>
            <th>Col 4</th>
            <th>Col 5</th>
            <th>Col 6</th>
            <th>Col 7</th>
            <th>Col 8</th>
            <th>Col 9</th>
            <th>Col 10</th>
            <th>Col 11</th>
            <th>Col 12</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>1.1</td>
            <td>1.2</td>
            <td>1.3</td>
            <td>1.4</td>
            <td>1.5</td>
            <td>1.6</td>
            <td>1.222222222222222222221</td>
            <td>1.2</td>
            <td>1.3</td>
            <td>1.4</td>
            <td>1.5</td>
            <td>1.6</td>
          </tr>
          
        </tbody>

      </table>
    </div>
    <p>
      <label>hide columns (comma seperated)</label>
      <input class="input inputHideColumns" type="text" placeholder="hide columns (comma seperated)" value="5,4">
    </p>
  </div>

CSS

.layout {
  width: 50%;
  margin: 0 auto;
}

table {
  border-spacing: 0;
  border-collapse: collapse;
  margin: auto;
  border: 1px solid black;
}

th {
  border-bottom: 1px solid grey;
}

td {
  text-align: center;
}

td,th{
  border:1px solid grey
}


.collapsed-col {
  display: none;
}

JavaScript

function indexColumns(table) {
  let rows = table.querySelectorAll("tr");
  rows.forEach(function (row, r) {
    let cols = row.querySelectorAll("th, td");
    cols.forEach(function (col, c) {
      col.classList.add("tr_" + r);
      col.classList.add("col_" + (c + 1));
    });
  });
}

function hideColumn(columns) {
  columns.forEach(function (num, i) {
    columns[i] = ".col_" + columns[i];
  });
  let selectors = columns.join(", ");
  // reset previously hidden
  let hidden = document.querySelectorAll(".collapsed-col");
  hidden.forEach(function (el) {
    el.classList.remove("collapsed-col");
  });
  // hide cells by class
  let cells = document.querySelectorAll(selectors);
  cells.forEach(function (item, i) {
    item.classList.add("collapsed-col");
  });
}

// index th/td elements by setting class 
let table = document.querySelector('table');
indexColumns(table);
hideColumn([4, 5]);

// test input
let inputHideColumns = document.querySelector(".inputHideColumns");
inputHideColumns.addEventListener("change", function (e) {
  let value = e.target.value.replaceAll(", ", ",");
  let columns = value.split(",");
  hideColumn(columns);
});