Les tableaux responsive TABLEAUX:Responsive

Pour que vos tableaux soient responsive, 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 :

images/C06-008.png

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

.table-responsive { 
        display: block; 
        width: 100%; 
        overflow-x: auto; 
} 

Vous avez la possibilité de déterminer...

Pour consulter la suite, découvrez le livre suivant :
couv_OW24BOO.png
60-signet.svg
En version papier
20-ecran_lettre.svg
En version numérique
41-logo_abonnement.svg
En illimité avec l'abonnement ENI
130-boutique.svg
Sur la boutique officielle ENI
Précédent
La légende des tableaux
Suivant
L'objectif