При создании html-таблицы в django расположение данных становится неправильным

enter image description here

enter image description here

enter image description here

я хочу сделать такую таблицу

Я хочу сделать таблицу, как на этом изображении, но у меня есть несколько проблем.

Задача 1: Когда вы смотрите на белый фон, вы видите числа 1,2,3,4. 1 и 2 одинаковые, а 3 и 4 одинаковые. Мне не нужно дважды повторять каждый симптом. Мне нужны уникальные симптомы в первом столбце.

Задача 2: Та же проблема, что и в задаче 1. Имена средств должны быть уникальными. Я сделал красные стрелки рядом с точками. Мне нужно только одно имя_средства и все точки должны быть под именем_средства.

А вот и мои коды...

from django.db import models
from django.utils import timezone
from django.contrib.auth.models import User

class UserSymptom(models.Model):
    user = models.ForeignKey(CustomUser, on_delete=models.CASCADE)
    symptom = models.ForeignKey(Symptom, on_delete=models.CASCADE)
    date = models.DateField(default=timezone.now)
    time = models.TimeField(default=timezone.now)

    def __str__(self):
        return f"{self.user} - {self.symptom.name} - {self.date} {self.time}"


class RemedyRubrics(models.Model):
    remedy_name = models.ForeignKey(RemedyName, on_delete=models.CASCADE)
    rubric = models.TextField()
    point = models.IntegerField()

    def __str__(self):
        return f"{self.remedy_name.remedi_adi} - {self.rubric} - {self.point} "

    class Meta:
        verbose_name_plural = 'Remedy Rubrics'

просматривает код

def homeopati4(request):
    user_symptoms = UserSymptom.objects.filter(user=request.user)
    matching_remedies = []

    for symptom in user_symptoms:
        # Semptom adındaki ilk harfi kontrol et
        first_letter = symptom.symptom.name[0]
        if first_letter.lower() in ['ö', 'ü', 'ş', 'ı']:
            # Semptom adı Türkçe karakterle başlıyorsa, ilk harfi atla ve kalan kısmı içeren rubrikleri bul
            symptom_name_without_first_letter = symptom.symptom.name[1:]
            matching_rubrics = RemedyRubrics.objects.filter(rubric__icontains=symptom_name_without_first_letter)
        else:
            # Semptom adı Türkçe karakterle başlamıyorsa, tüm adı kullan
            matching_rubrics = RemedyRubrics.objects.filter(rubric__icontains=symptom.symptom.name)

        for remedy in matching_rubrics:
            matching_remedies.append({
                'symptom_name': symptom.symptom.name,
                'remedy_name': remedy.remedy_name.remedi_adi,
                'point': remedy.point
            })

    return render(request, 'homeopati/homeopati4.html', {'matching_remedies': matching_remedies})

код шаблона

{% extends 'dashboard.html' %}

{% block content %}

<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Homeopati - 4. Adım</title>

<style>
/* Güncellenmiş CSS kodları */
.table-responsive {
  display: block;
  overflow-x: auto;
  width: 100%;
  white-space: nowrap;
}

table {
  border-collapse: collapse;
  width: auto; /* Tablonun genişliği içeriğe göre ayarlanacak */
}

th, td {
  text-align: left;
  padding: 8px;
  white-space: nowrap;
}

/* İlk iki sütunu sabit yap */
th:nth-child(-n+2), td:nth-child(-n+2) {
  position: sticky;
  left: 0;
  background-color: #FFF; /* Sabit sütunların arkaplanını beyaz yap */
  z-index: 2; /* Diğer hücrelerin üzerinde görünmesini sağlar */
}

/* İlk sabit sütun için sağ kenarlık */
th:nth-child(1), td:nth-child(1) {
  z-index: 3; /* İkinci sabit sütun üzerinde görünmesini sağlar */
  border-right: 2px solid #ddd; /* Sabit sütunlar arasındaki ayrımı belirginleştir */
}

/* İkinci sabit sütun için sağ kenarlık */
th:nth-child(2), td:nth-child(2) {
  border-right: 2px solid #ddd; /* Diğer sütunlardan ayrımı belirginleştir */
}
</style>




</head>
<body>
<h1>Homeopati - 4. Adım: Olası Remediler</h1>
<p>Bu sayfada, seçtiğiniz semptomlara göre olası remedileri ve her semptom için puanlarını görebilirsiniz.</p>
<div class="table-responsive">
  <table class="table table-bordered">
  <thead>
  <tr>
  <th>#</th>
  <th>Semptom Adı</th>
  {% for remedy in matching_remedies %}
  <th>{{ remedy.remedy_name }}</th>
  {% endfor %}
  </tr>
  </thead>
  <tbody>
  {% for symptom in matching_remedies %}
  <tr>
  <td>{{ forloop.counter }}</td>
  <td>{{ symptom.symptom_name }}</td>
  {% for remedy in matching_remedies %}
  {% if remedy.symptom_name == symptom.symptom_name %}
  <td>{{ remedy.point }}</td>
  {% else %}
  <td>-</td>
  {% endif %}
  {% endfor %}
  </tr>
  {% endfor %}
  </tbody>
  </table>
</div>



</body>
</html>

{% endblock %}
Вернуться на верх