javascript - 卡住表格中已呈现的列的宽度

Question

对于已经呈现的表格，如果我隐藏某些行，则根据内容动态重新计算列的宽度:

function switchRow(ixRow){

let table = document.getElementById('theTable');

let row = table.rows[ixRow];
let currentVisibility = row.style.display;

row.style.display= currentVisibility== 'none' ? 'table-row' : 'none';

}

table{
  border: 2px solid black;
  padding: .5em;
}

<table id='theTable'>
<tr><td>Hellen</td><td>Smith</td></tr>
<tr><td>Montgomery</td><td>Wolfeschlegelsteinhausenbergerdorff</td></tr>
</table>
<br>
<button onclick="switchRow(1)">Switch row 1</button>

有没有一种简单的方法可以在第一次渲染后“卡住”所有列的宽度，以便隐藏/显示保持所有表格/列的宽度？

编辑以区别于其他可能重复的问题 我正在寻找的是保留在呈现表格时计算的宽度 - 无论规则是明确的还是隐含的 -。一旦显示，宽度必须保持不变。 我不想添加任何宽度优先规则，我想要表格的默认呈现，但一旦呈现，我就不会寻找宽度的动态变化。

Answer 1

我会先计算页面加载后的最大单元格宽度，然后将其分配给单元格，以备后用:

window.onload = function () {
   const table = document.getElementById('theTable');
   const widths = computeColumnWidths(table)
   setColumnWidths(table, widths)
}

function computeColumnWidths(table) {
  const widths = Array.from({ length: table.rows[0].cells.length })
                      .fill(0);
  
  for (let i = 0; i < table.rows.length; i++ ) {
    const row = table.rows[i]
    
    for (let j = 0; j < row.cells.length; j++) {
      const cell = row.cells[j]
      widths[j] = Math.max(widths[j], cell.offsetWidth);
    }
  }
  
  return widths;
}

function setColumnWidths(table, widths) {
  for (let i = 0; i < table.rows.length; i++ ) {
    const row = table.rows[i]
    
    for (let j = 0; j < row.cells.length; j++) {
      const cell = row.cells[j]
      cell.style.width = widths[j] + 'px';
    }
  }
}

function switchRow(ixRow){

  let table = document.getElementById('theTable');

  let row = table.rows[ixRow];
  let currentVisibility = row.style.display;

  row.style.display = currentVisibility == 'none' ? 'table-row' : 'none';

}

table{
  border: 2px solid black;
  padding: .5em;
}

<table id='theTable'>
<tr><td>Hellen</td><td>Smith</td></tr>
<tr><td>Montgomery</td><td>Wolfeschlegelsteinhausenbergerdorff</td></tr>
</table>
<br>
<button onclick="switchRow(1)">Switch row 1</button>