Django + Bootstrap 折叠表前端问题？

Question

我一直在试图找出我已经研究了几天的前端问题。我正在使用 Django + Bootstrap 折叠手风琴。我想要做的是完全隐藏一个 div 和所有间距，直到单击可折叠按钮（眼球）。出于某种原因，它引发了一些奇怪的前端问题，如下所示。

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

这是我目前使用的 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>

我不是一个庞大的前端人员，任何关于让用户看起来更干净的提示将不胜感激！

Answer 1

您应该将折叠类添加到 <tr> 标签而不是其中的 <div>s。