Les tableaux responsives

Pour que vos tableaux soient responsives, il faut ajouter la classe .table-responsive à l’élément parent du tableau, l’élément <div> de la colonne de la grille dans cet exemple.

Le dossier à télécharger pour cet exemple est nommé 06-Tableaux-08.

<div class="container"> 
    <div class="row"> 
        <div class="col table-responsive"> 
            <table class="table"> 
                 ... 
            </table> 
        </div> 
    </div> 
</div> 

Cette classe va permettre d’utiliser une barre de défilement pour visualiser les tableaux très larges.

Voici l’exemple d’un tableau large affiché dans une petite largeur d’écran :

Voici les propriétés de la classe .table-responsive :

.table-responsive { 
      overflow-x: auto; 
} 

Vous avez la possibilité de déterminer pour quelle taille d’écran, cette propriété doit être active en ajoutant à la classe...