JS修改元素display属性后表格<td>布局错乱问题求助

我太懂你遇到的这个糟心问题了——当你用formTable.rows[i+2].style.display = 'block'显示表格行时，整个表格的布局直接乱套，内容挤到一个单元格里还把其他行的单元格都撑变形了。这其实是个很典型的表格布局误区：表格行（<tr>）默认的display属性是table-row，而非block，强行用block会彻底破坏表格原生的网格布局规则。

一步到位的解决方案 #

要正确显示隐藏的表格行，只需把display设置为table-row而非block，隐藏时用none是完全没问题的。修改后的代码如下：

if (/* 你的隐藏判断条件 */) {
  formTable.rows[i+2].style.display = 'none';
} else {
  formTable.rows[i+2].style.display = 'table-row';
}

为什么会出现这个问题？ #

表格是一套特殊的布局体系，它的子元素（<tr>、<td>等）都有专门的display值来维持网格结构：

• <tr>默认值为table-row，负责参与表格的行布局
• <td>默认值为table-cell，负责填充行内的单元格空间
  当你把<tr>设为block后，它就会像普通块级元素一样独立布局，不再参与表格的网格排列，自然就会出现内容挤堆、布局错乱的情况。

适配你的需求（仅显示复选框选中的行） #

按照上面的修改，你就能完美实现「选中复选框显示对应行，取消选中隐藏行」的需求，同时完全保留表格的正常布局，不需要额外添加复杂样式来修复错乱。

内容的提问来源于stack exchange，提问作者Lee Jing Yong