Tableau html responsive exemple avec bootstrap
table-responsive bootstrap comment l'utiliser

Bootstrap 2 ou 3 ou 4 ou 5 tableau responsive exemple

Je fais cet article car j'en ai marre à chaque fois de re-coder de A à Z mon tableau bootstrap, ok je connais la syntaxe par cœur, 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 4 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>
// Cinquième ligne du tableau bootstrap 5, c'est la troisième ligne d'entrée de votre table bootstrap actiaweb.com<tr>
<td>Ligne 5 colonne 1</td>
<td>Ligne 5 colonne 2</td>
<td>Ligne 5 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.

Bootstrap 2 ou 3 ou 4 ou 5 tableau responsive exemple
Note 5 sur 5 Pour 6 votes