Bonjour à tous 

Je m'exerce en Python avec le framework Django sur une nouvelle application, actuellement, je rencontre un " petit " problème d'affichage dans un tableau de résultat de recherche.

J'ai une nav bar contenant toutes les lettres de l'alphabet, lors d'un clic par exemple sur la lettre " B " cela affiche tout les postes débutant par la lettre "B", mais le petit souci, c'est que le résultat est en longueur. (voir l'image ci-dessous)

Ce que je voudrais, c'est d'étaler le résultat sur la partie blanche de la page (voir l'image ci-dessous)

page_recherche.html 

{% extends 'baseSansBg_Poste.html' %}

{% block title %}
    <title>WIKI CEM | POSTES</title>
{% endblock %}

{% block content %}

    {% include 'alphabet.html' %}


            <table border="1" class = "col-4">
                <thead>
                    <tr>
                        <th border = 2px, colspan="2"><center><h2></h2></center></th>
                        {% if C %}
                    </tr>
                </thead>
                <tbody>

{% for post in C %}
                    <tr>

                        <td>
                            <center>
                                <h4>
                                    {% if post.Tension.libelle == "400 kV" %}
                                            <a href="{% url 'poste:PosteP' pk=post.pk %}" style="color: #C60800;" >{{post.libelle}} {{post.Tension}}</a>
                                        {% elif post.Tension.libelle == "225 kV" %}
                                            <a href="{% url 'poste:PosteP' pk=post.pk %}" style="color: #7CFC00;" >{{post.libelle}} {{post.Tension}}</a>
                                        {% elif post.Tension.libelle == "150 kV" %}
                                            <a href="{% url 'poste:PosteP' pk=post.pk %}" style="color: blue;" >{{post.libelle}} {{post.Tension}}</a>
                                        {% elif post.Tension.libelle == "90 kV" %}
                                            <a href="{% url 'poste:PosteP' pk=post.pk %}" style="color: purple;" >{{post.libelle}} {{post.Tension}}</a>
                                        {% elif post.Tension.libelle == "63 kV" %}
                                            <a href="{% url 'poste:PosteP' pk=post.pk %}" style="color: black;" >{{post.libelle}} {{post.Tension}}</a>
                                        {% elif post.Tension.libelle == "<45 kV" %}
                                            <a href="{% url 'poste:PosteP' pk=post.pk %}" style="color: #7F5539;" >{{post.libelle}} {{post.Tension}}</a>
                                        {% elif post.Tension.libelle == "COURANT CONTINU" %}
                                            <a href="{% url 'poste:PosteP' pk=post.pk %}" style="color: red;" >{{post.libelle}} {{post.Tension}}</a>
                                        {% elif post.Tension.libelle == "HORS TENSION" %}
                                            <a href="{% url 'poste:PosteP' pk=post.pk %}" style="color: silver;" >{{post.libelle}} {{post.Tension}}</a>
                                        {% endif %}
                                </h4>
                             </center>
                        </td>
                    </tr>
                        {% endfor %}

                {% else %}
                        <tr>
                            <td><center>Aucun poste pour cette lettre.</center></td>
                        </tr>
                        {% endif %}
                </tbody>
            </table>

{% endblock %}

-
Edité par RecMan 27 juillet 2022 à 15:53:32

actuellement, tu as une table et tu mets tout dans la 1ère colonne. 1 seul td dans chaque tr avec la boucle for, donc de lignes que de post dans C.

L'idée serait de mettre plusieurs td dans chaque tr selon le nombre d'éléments que tu veux afficher par colonne. (il doit falloir jouer avec les tags forloop.counter, divisibleby; ou renvoyer également la longueur de C à la page (ou un range(1,c+1)

umfred a écrit:

actuellement, tu as une table et tu mets tout dans la 1ère colonne. 1 seul td dans chaque tr avec la boucle for, donc de lignes que de post dans C.

L'idée serait de mettre plusieurs td dans chaque tr selon le nombre d'éléments que tu veux afficher par colonne. (il doit falloir jouer avec les tags forloop.counter, divisibleby; ou renvoyer également la longueur de C à la page (ou un range(1,c+1)

T'aurai un lien ou un code de ce type de tableau dynamique que je puisse m'en inspirer ?

-
Edité par RecMan 27 juillet 2022 à 19:23:12

l'algo c'est 2 boucles imbriquées, une pour le nombre de colonnes, une pour le nombre de lignes

si on veut nb_lignes, alors pour n éléments dans C, on aura nb_colonnes = n//nb_lignes colonnes (partie entière de la division) +1 si n%nb_lignes différent de 0 (la division n'est pas entière) 

Avec C une liste, le principe serait:

<tbody>
pour i_ligne de 0 à nb_lignes (exclus):
   <tr>
    pour i_colonne de 0 à nb_colonnes (exclus):
        <td>

         si i_colonne*nb_ligne+i_ligne < taille de C alors affiche C[i_colonne*nb_lignes+i_ligne] 

         </td>
   </tr>
</tbody>