Django + Bootstrap折叠表格前端问题？

Question

我一直在尝试解决一个我已经处理了几天的前端问题。我正在使用Django + Bootstrap折叠手风琴。我想要做的是完全隐藏一个div和所有的间距，直到可折叠按钮被点击(眼球)。出于某种原因，它抛出了几个奇怪的前端问题，如下所示。

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

​

​

这是我现在已经准备好的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。