Discussion :

[Media20]

Bonjour a tous
J'ai un tabeau de 27 colonnes et une ligne a integrer sur une page web.
Faut il utiliser un container, container-fluid?
Quelle est la meilleur solution.
Merci d'avance

[darkstar123456]

Bonjour,

Il vaudrait mieux préciser avec quoi vous travaillez.
Les termes container et container-fluid ne sont pas quelque chose de natif à un navigateur.
J'imagine qu'il s'agit de Bootstrap ou d'un autre framework proche de celui-ci.

Quoi qu'il en soit, cette réponse à propre à votre projet et de ce que vous souhaitez en faire.
D'ailleurs, 27 colonnes c'est très vague. Il pourrait y avoir une lettre par cellule comme des paragraphes entiers.

De plus, vous indiquez 27 colonnes et une seule ligne ? Pourquoi ne pas alors inverser la table et faire une ou deux colonnes et 27 lignes ?
Ca serait beaucoup plus lisible.

En conclusion et personnellement, si j'avais 27 colonnes à afficher et que la taille du container n'avait pas d'importance, je partirais sur un container-fluid
Attention de ne pas oublier la classe .table-responsive si vous utilisez Boostrap Source : https://getbootstrap.com/docs/5.1/co...ponsive-tables

[Media20]

Rebonjour
Je fonctionne avec boostrap.
voila l'exemple :
1 lettre par cellule comme cet exemple :
https://www.woopets.fr/chien/races/

Merci pour la reponse

[darkstar123456]

Bonjour,

Justement, dans cet exemple c'est très bien fait car ça n'utilise pas de <table>.
Les <table> sont destinées à afficher un listing de données selon des clés (titre de colonne & de ligne).

Afficher l'alphabet ne correspond pas a cet usage; et si on regarde le site d'exemple; ils ont utilisé une liste.
Ce qui est bien mieux à tous points de vue (même SEO) et surtout pour pouvoir faire facilement du responsive.

Combiné à flexbox; il est très facile de faire passer une liste de l'aspect horizontal à vertical

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
 
.ma-liste {
    display: flex;
    flex-direction: column;
    align-items: center;
}
 
@media (min-width: 600px) {
   flex-direction: row;
}

[Media20]

Rebonjour,
la cela depasse un peu mes competences.
Ouille ouille
Merci pour la reponse

[jreaux62]

bonjour,

1- ce serait aimable que tu répondes à tes autres discussions ouvertes.

2- il faut préciser QUELLE VERSION de Bootstrap tu utilises,
car d'une version à l'autre, certaines syntaxes ont été modifiées

Bootstrap 5 :

• Grid system : https://getbootstrap.com/docs/5.0/layout/grid/
• système de flex box : https://getbootstrap.com/docs/5.0/utilities/flex//
• cards : https://getbootstrap.com/docs/5.0/components/card/

L'affichage des chiens que tu montres dans le lien précédent fonctionne sur le même principe.
Avec Bootstrap, il suffit d'ajouter des classes CSS pour obtenir le résultat voulu.

Ça donne ça :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<div class="container-fluid">
  <div class="row d-flex flex-row">
 
    <div class="card col-6 col-sm-4 col-md-2">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
      </div>
    </div>
 
    <div class="card col-6 col-sm-4 col-md-2">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
      </div>
    </div>
    ...
  </div>
</div>

• <div class="d-flex"> : on a ici une flexbox
• class="card ..." : on définit le block sous forme de "card"
• class="... col-6 col-sm-4 col-md-2" : permet de définir le nombre d'élements par ligne, en fonction de la largeur de la fenêtre (voir le grid system)