Sommaire

Les tableaux adaptatifs CSS POUR LES TABLEAUX:Tableau adaptatif

Dans le chapitre La grille adaptative, nous étudierons la notion de design adaptatif, le Responsive Web Design. La grille adaptative de Bootstrap va permettre un affichage optimisé du contenu des pages Web pour les écrans d’ordinateur, de tablette et de smartphone.

Pour avoir un tableau adaptatif, optimisé pour un affichage dans un smartphone, avec une largeur d’écran inférieure à 768 pixels (avec la règle @media (max-width: 768px)), il suffit de placer le tableau dans une boîte <div> associée à la classe .table-responsive.

Avec un petit écran, l’utilisateur pourra utiliser une barre de défilement horizontale pour afficher tout le tableau, uniquement si cela est nécessaire.

Exemple du code HTML :

<div class="table-responsive"> 
   <table class="table"> 
      ... 
   </table> 
</div>

L’affichage :

images/C04-008.png