Скрыть заголовок таблицы, если все значения в таблице равны null

У меня есть модель формы, которую я отображаю в таблице. Форма имеет около 40 полей, разбитых на 6 различных таблиц. Я настроил операторы if, чтобы не отображать элементы таблицы, если поле пусто в базе данных. Это работает как ожидалось, единственная проблема заключается в том, что если все элементы скрыты, то заголовок таблицы все равно отображается. Как я могу скрыть заголовок таблицы, если все элементы в этой конкретной таблице скрыты.

<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>

Вы можете использовать JavaScript, чтобы скрыть заголовок, если <tbody> пуст: Предположим, что у нас есть <th id="tab_header">Tab header</th> <tbody id="tab_body">Some content here</tbody>. Тогда

let tbody = document.getElementById("tab_body").innerHTML;
# Check if it contains something
if (tbody === '') {
    tab_header = document.getElementById("tab_header").innerHTML = "";
} else {
    // Nothing to do i guess
}

NB Будьте внимательны при проверке содержимого, возможно, это не пустая строка, а что-то другое.

        <table class="post-table" id="table-example">
        <tr>
            <th class="table-header" COLSPAN="1" id="tab_header">
                <H3>ADDITIONAL INFO</H3>
            </th>
        </tr>
        <tbody id="tab_body">
            {% if post.additional_info != '' %}
                <tr>
                    <td id="test">{{ post.additional_info }}</td>
                </tr>
            {% endif %}
        </tbody>
    </table>

    
    <script>
        var tbl = document.getElementById('table-example');
        if (tbl.rows.length == 1) {
            console.log('IT WORKED')
            tab_header = document.getElementById("tab_header").innerHTML = "";
            
        }
        console.log(tbl.rows.length)
    </script>
Вернуться на верх