Html Django+；引导折叠表前端问题？

几天来，我一直在努力解决一个前沿问题。我正在使用Django+引导折叠手风琴。我试图做的是完全隐藏一个div和所有的间距，直到单击可折叠按钮（眼球）。出于某种原因，它抛出了一些奇怪的前端问题，如下所示

基本上，折叠的div所做的就是显示用户提供的新表行的详细信息。但在页面加载时，它会显示所有这些折叠行所在的额外间距，并且还会引发一些奇怪的边界问题？问题的第一个条目是一个实例，其中用户提供了

地址
电话
位置
问题


这是我现在使用的HTML

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


希登罗先生{
边框顶部样式：隐藏；
边框底部样式：隐藏；
}
参赛日期
员工姓名
员工姓氏
{employee_entries%}
{{employee_entry.created_于{124;日期：'md，Y'}}
{%if employee\u entry.first\u name%}
{{employee_entry.first_name}
{%else%}
{%endif%}
{%if employee_entry.last_name%}
{{employee_entry.last_name}
{%else%}
{%endif%}
{%if employee_entry.address%}
地址：{employee_entry.Address}
{%else%}{%endif%}
{%if employee_entry.phone%}
电话：{{employee_entry.Phone}
{%else%}{%endif%}
{%if employee_entry.position%}
职位：{{employee_entry.Position}
{%else%}{%endif%}
{%if employee_entry.conern%}
关注：{employee_entry.Concern}
{%else%}{%endif%}
{%endfor%}

我不是一个庞大的前端的人，任何提示，使这看起来更清洁的用户将不胜感激
 您应该将折叠类添加到
标记中，而不是添加到它们内部的
s
。
hmmmm我将折叠类放置在
标记中，现在按钮不起作用。