Django + Bootstrap collapsed table front-end issue?

Question

I have been trying to figure out a front-end issue I've been on for a few days. I am using Django + Bootstrap collapsed accordion. What I am trying to do is completely hide a div, and all spacing until the collapsable button is clicked (eyeball). For some reason it's throwing a couple weird front-end issues like below.

Basically what the collapsed div does, is show details if the user provides them which are new table rows. But on page load it shows all of this extra spacing where the collapsed rows are, and also throws some odd border issues? The first entry with the issue is an instance where a user has provided Address Phone Position Concern

This is the HTML I have in place as of now,

<style>

.hiddenRow {
    border-top-style: hidden;
    border-bottom-style: hidden;
}

</style>

<div class="table-responsive">
<table class="table small">
    <thead>
        <tr>
            <th></th>
            <th>Entry Date</th>
            <th>Employee First Name</th>
            <th>Employee Last Name</th>
        </tr>
    </thead>
    {% for employee_entry in employee_entries %}
    <tbody>
        <tr data-toggle="collapse" class="accordion-toggle" data-target=".employee-entry-{{ employee_entry.id }}">
            <td><button><span class="glyphicon glyphicon-eye-open"></span></button></td>
            <td>{{ employee_entry.created_at|date:'M d, Y' }}</td>
            {% if employee_entry.first_name %}
            <td>{{ employee_entry.first_name }}</td>
            {% else %}
            <td></td>
            {% endif %}
            {% if employee_entry.last_name %}
            <td>{{ employee_entry.last_name }}</td>
            {% else %}
            <td></td>
            {% endif %}
                {% if employee_entry.address %}
                <tr><td class="hiddenRow"><div class="collapse employee-entry-{{ employee_entry.id }}">Address: {{ employee_entry.address }}</div></td></tr>
                {% else %}{% endif %}
                {% if employee_entry.phone %}
                <tr><td class="hiddenRow"><div class="collapse employee-entry-{{ employee_entry.id }}">Phone: {{ employee_entry.phone }}</div></td></tr>
                {% else %}{% endif %}
                {% if employee_entry.position %}
                <tr><td class="hiddenRow"><div class="collapse employee-entry-{{ employee_entry.id }}">Position: {{ employee_entry.position }}</div></td></tr>
                {% else %}{% endif %}
                {% if employee_entry.conern %}
                <tr><td class="hiddenRow"><div class="collapse employee-entry-{{ employee_entry.id }}">Concern: {{ employee_entry.concern }}</div></td></tr>
                {% else %}{% endif %}
        {% endfor %}
    </tr>
    </tbody>
</table>
</div>

I'm not a huge front-end person, any tips on making this look cleaner for the user would be greatly appreciated!

Answer 1

You should add the collapse class to the <tr> tags not to the <div>s inside them.