Не получается выстроить правильную таблицу в HTML jinja
Пытаюсь построить таблицы в шаблоне Django HTML но все выходит криво, хотя если я создаю отдельный HTML файл и делаю таблицу там, все работает нормально
Код HTML шаблона:
{% extends 'main/doki.html' %}
{% block content %}
<div class="studentcont">
{% for ela in studentss %}
<div class="disian-damp">
<thead>
<tr>
<th>id</th>
<th>Номер группы/th>
<th>ФИО Студента</th>
<th>Номер телефона</th>
<th>Электронная почта</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{ ela.titleid2 }}/td>
<td>{{ ela.titlegroup2 }}</td>
<td>{{ ela.titlestudent }}</td>
<td>{{ ela.titlephone }}</td>
<td>{{ ela.titleemail }}</td>
</tr>
</tbody>
</div>
{% endfor %}
{% endblock %}
Код models.py
class studentes(models.Model):
titleid2 = models.CharField('id', max_length=999)
titlegroup2 = models.CharField('Номер группы', max_length=20)
titlestudent = models.CharField('ФИО студента', max_length=70)
titlephone = models.CharField('Номер телефона', max_length=15)
titleemail = models.CharField('Электронный адрес', max_length=200)
def __str__(self):
return self.titlegroup2
def __str__(self):
return self.titlestudent
def __str__(self):
return self.titlephone
def __str__(self):
return self.titleemail
class Meta:
verbose_name_plural = 'Студенты'
CSS код:
.disian-damp {
width: 100%;
border: none;
margin-bottom: 20px;
border-collapse: separate;
}
.disian-damp thead th {
font-weight: bold;
text-align: left;
border: none;
padding: 10px 15px;
background: #EDEDED;
font-size: 14px;
border-top: 1px solid #ddd;
}
.disian-damp tr th:first-child, .disian-damp tr td:first-child {
border-left: 1px solid #ddd;
}
.disian-damp tr th:last-child, .disian-damp tr td:last-child {
border-right: 1px solid #ddd;
}
.disian-damp thead tr th:first-child {
border-radius: 20px 0 0 0;
}
.disian-damp thead tr th:last-child {
border-radius: 0 20px 0 0;
}
.disian-damp tbody td {
text-align: left;
border: none;
padding: 10px 15px;
font-size: 14px;
vertical-align: top;
}
.disian-damp tbody tr:nth-child(even) {
background: #F8F8F8;
}
.disian-damp tbody tr:last-child td{
border-bottom: 1px solid #ddd;
}
.disian-damp tbody tr:last-child td:first-child {
border-radius: 0 0 0 20px;
}
.disian-damp tbody tr:last-child td:last-child {
border-radius: 0 0 20px 0;
}
P.s Пример для таблицы брал с сайта https://snipp.ru/html-css/table-style