French English German Italian Russian Spanish

Help us

Pour continuer à avoir nos extensions gratuites. To continue to have our free extensions.

Montant, Amount:
Tableau html responsive exemple avec bootstrap

Je fais cet article car j'en ai marre à chaque fois de recoder de A à Z mon tableau bootstrap, ok je connais la syntaxe par coeur, mais bon ce sera plus simple de faire un copier coller puis d'adapter mon tableau responsive.

Exemple de code entier d'une table bootstrap responsive

Voici l'exemple à juste copier coller pour remplacer les éléments de chaque ligne et colonne, tout est décrit, il y a plus qu'à.

Juste une précision, j'ai ajouté "table-bordered"  qui permet d'avoir toutes les bordures de votre tableau ETtable-striped pour mieux naviguer et voir les différences entre les lignes.

<div class="table-responsive">
<table class="table table-striped table-bordered">
// Première ligne du tableau bootstrap avec ici 3 entrées il s'agit des titres de chaque colonne de votre table bootstrap
<thead>
<tr>
<th>Ligne 1 colonne 1</th>
<th>Ligne 1 colonne 2</th>
<th>Ligne 1 colonne 3</th>
</tr>
</thead>
<tbody>
// Seconde ligne du tableau bootstrap 2, c'est la première ligne réelle de votre table bootstrap
<tr>
<td>Ligne 2 colonne 1</td>
<td>Ligne 2 colonne 2</td>
<td>Ligne 2 colonne 3</td>
</tr>
// Troisième ligne du tableau bootstrap 3, c'est la seconde ligne de contenu de votre table bootstrap
<tr>
<td>Ligne 3 colonne 1</td>
<td>Ligne 3 colonne 2</td>
<td>Ligne 3 colonne 3</td>
</tr>
// Quatrième ligne du tableau bootstrap 4, c'est la troisième ligne d'entrée de votre table bootstrap
<tr>
<td>Ligne 4 colonne 1</td>
<td>Ligne 4 colonne 2</td>
<td>Ligne 4 colonne 3</td>
</tr>
</tbody>
</table>
</div>

Votre table bootstrap responsive toute faite

Ligne 1 colonne 1 Ligne 1 colonne 2 Ligne 1 colonne 3
Ligne 2 colonne 1 Ligne 2 colonne 2 Ligne 2 colonne 3
Ligne 3 colonne 1 Ligne 3 colonne 2 Ligne 3 colonne 3
Ligne 4 colonne 1 Ligne 4 colonne 2 Ligne 4 colonne 3

Pour poursuivre sur les tables bootstrap

Certains diront que suivant les versions de bootstrap on peut faire différemment etc etc ... et bien qu'ils fassent différemment, personnellement je prends ce code pour toutes les versions et cela marche très bien.