Не получается выстроить правильную таблицу в 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

Вернуться на верх