Using Bootstrap on a table causes an unexpected empty column to appear on the right side (as shown in the screenshot). This issue is strange because it works fine with another table using the same setup... but this particular table seems to have a mind of its own!
Here's the HTML code for the table:
<table class="table table-bordered table-hover table-responsive" style="text-align: center">
<thead>
<tr>
<th>{% trans "Issue type" %}</th>
<th>{% trans "State" %}</th>
<th>{% trans "Date" %}</th>
<th>{% trans "New comment" %}</th>
</tr>
</thead>
{% if issues|length == 0 %}
<tr class="empty-row">
<td class="no-issue" colspan="3">{% trans "none(f)" %}</td>
</tr>
{% endif %}
{% for issue in issues %}
<tr class="issue">
<td><a href="{% url 'customer_support:comment_issue' issue.id %}">
{% if issue.issue_type %}{{ issue.issue_type }}{% else %}{{ issue.other }}{% endif %}
</a></td>
<td>{% if issue.resolved %}
<span class="badge badge-success">{{ issue.get_state_display }}</span>
{% else %}
<span class="badge badge-warning">{{ issue.get_state_display }}</span>
{% endif %}
</td>
<td>{{ issue.date | date }}</td>
<td>{% if issue.has_notifications %}
<span class="badge badge-warning">{% trans 'New' %}</span>
{% else %}
{% endif %}</td>
</tr>
{% endfor %}
</table>
Additionally, here are the screenshots that display the issue with the empty column on the right:
https://i.sstatic.net/RV3Xs.png
EDIT: