如何在表格所有行隐藏时隐藏整个表格，消除其外边距占位？

当然有办法搞定这个问题！我来给你分享几个实用的方案，你可以根据自己的技术栈和需求来选：

这是最简洁的纯CSS方案，直接让浏览器自动检测表格里的行是否都被隐藏。假设你的隐藏行是用display: none控制的，代码可以这么写：

/* 当表格有可见行时，保持正常显示 */
table:has(tr:not([style*="display: none"])) {
  display: table;
}

/* 当所有行都隐藏时，隐藏整个表格并清除外边距 */
table:has(tr[style*="display: none"]):not(:has(tr:not([style*="display: none"]))) {
  display: none;
  margin: 0;
}

要是你是用自定义类（比如.hidden）来隐藏行的，代码会更清爽：

table:has(tr:not(.hidden)) {
  display: table;
}

table:has(tr.hidden):not(:has(tr:not(.hidden))) {
  display: none;
  margin: 0;
}

小提醒：:has()现在已经被Chrome、Firefox 121+、Edge等主流现代浏览器支持，但如果要兼容旧版浏览器，就得用下面的JS方案了。

如果需要支持不兼容:has()的老浏览器，用JS来动态监听行的状态变化是更稳妥的选择。

先写一个检测表格可见性的核心函数：

function checkTableVisibility(table) {
  const rows = table.querySelectorAll('tr');
  let hasVisibleRow = false;
  
  rows.forEach(row => {
    // 用getComputedStyle获取真实的显示状态，不管是内联样式还是类控制的
    if (window.getComputedStyle(row).display !== 'none') {
      hasVisibleRow = true;
    }
  });
  
  // 根据结果切换表格的显示状态
  if (hasVisibleRow) {
    table.style.display = 'table';
    table.style.margin = ''; // 恢复原有外边距
  } else {
    table.style.display = 'none';
    table.style.margin = '0';
  }
}

然后在合适的时机调用这个函数：

• 页面加载完成时，初始化所有表格：

document.addEventListener('DOMContentLoaded', () => {
  document.querySelectorAll('table').forEach(checkTableVisibility);
});

• 当你通过按钮或其他操作修改行的显示状态后，直接针对目标表格调用checkTableVisibility(targetTable)
• 如果是动态创建的表格，在把它添加到DOM之后立刻调用这个函数就行

如果这些行的隐藏状态是在服务器端就能确定的，那直接在渲染阶段就处理掉是最高效的——如果所有行都要隐藏，干脆就不输出<table>标签，或者给表格加上hidden属性/类。

举个PHP伪代码的例子：

<?php if (!empty($visibleRows)): ?>
  <table>
    <?php foreach ($visibleRows as $row): ?>
      <tr>
        <!-- 行内容 -->
      </tr>
    <?php endforeach; ?>
  </table>
<?php endif; ?>

这样从根源上就避免了空表格占用空间的问题，连前端的额外处理都省了。

内容的提问来源于stack exchange，提问作者Movak