Почему мои элементы div и формы выталкиваются за пределы таблицы?
Код шаблона Django:
Включает jQuery и Bootstrap; рендерится через обычную функцию Django render и передается список моделей файлов и опций профиля.
{% extends 'client/header.html' %}
{% block content %}
<div class="container-fluid">
<div class="row">
<div class="col">
<div class="row">
<div class="col">
<div class="table-responsive">
<table class="table">
<tbody>
{% for file in Files %}
<tr>
<div id="file{{ file.id }}">
<form method="POST">
<input name="fileid" type="hidden" value="{{ file.id }}" required />
<td>
<input name="filename" type="text" value="{{ file.getFriendlyName }}" required />
</td>
<td>
<select style="width: 236px;" name="profileChoice" required>
{% for profile in Profiles %}
<option value="{{ profile.id }}" {% ifequal profile.id file.profile.id %}selected{% endifequal %}>{{ profile.label }}</option>
{% endfor %}
</select>
</td>
<td>
{{ file.date_updated }}
</td>
<td>
<button type="button" class="btn btn-primary" value="saveChanges" onclick="formThing(this);">Save</button>
<a type="button" class="btn btn-danger" href="#" onclick="if(confirm('Are you sure?')){fetch('/files/removeFile/{{file.id}}');} location.href = '/companyadmin/fileManager';">Remove</a>
</td>
</form>
</div>
</tr>
{% endfor %}
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
{% endblock %}