如何实现表格内所有值均为空时自动隐藏对应表头

直接在服务端渲染阶段判断当前表格是否有可展示的内容，提前决定是否渲染整个表格，完全避免前端表头残留问题，也不会出现表头闪显再消失的抖动。
逻辑是给每个表格单独加一个总判断条件：只要该表格关联的所有字段里有一个不为空，就渲染整个表格（含表头），否则直接跳过渲染。
示例代码如下（以Pool Details表格为例）：

{% comment %} 外层总判断：只要有一个字段非空就显示整个表格 {% endcomment %}
{% if post.pool_size != '' or post.pool_style != '' %}
<table class="post-table">
    <tr>
        <th class="table-header" colspan="2">
            <h3>Pool Details</h3>
        </th>
    </tr>
    <tbody>
        {% if post.pool_size != '' %}
        <tr>
            <td>pool size:</td>
            <td>{{ post.pool_size }}</td>
        </tr>
        {% endif %} 
        {% if post.pool_style != '' %}
        <tr>
            <td>Pool Style:</td>
            <td>{{ post.pool_style }}</td>
        </tr>
        {% endif %}
    </tbody>
</table>
{% endif %}

优势：

• 不需要额外前端代码，无依赖
• 逻辑清晰，后续新增字段只要同步更新外层总判断条件即可
• 不会产生多余的DOM节点，页面性能更好

如果不想修改模板层的判断逻辑，可以用JS统一处理所有表格，不需要给每个表格单独加ID，适配你现有的6个表格场景。
你之前的JS不生效的原因是：innerHTML会包含缩进、换行等空白字符，所以tbody === ''的判断条件永远无法命中，改为判断tbody下的tr数量即可。
通用JS代码如下：

// 页面加载完成后执行
document.addEventListener('DOMContentLoaded', () => {
    // 遍历所有post-table表格
    document.querySelectorAll('.post-table').forEach(table => {
        // 统计tbody下的有效行数量
        const dataRows = table.querySelector('tbody').querySelectorAll('tr').length
        if (dataRows === 0) {
            // 无有效数据直接隐藏整个表格
            table.style.display = 'none'
        }
    })
})

优势：

• 无需修改现有模板的字段判断逻辑
• 6个表格通用，不需要单独给每个表格加自定义ID
• 判断逻辑准确，不受空白字符影响

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