HTML CSS JAVASCRIPT SQL PYTHON PHP HOW TO W3.CSS JAVA JQUERY C++ R React
ภาษาไทย Afrikaans العربية čeština Deutsch Español Français हिन्दी Bahasa Indonesia Italiano 日本語 한국어 မြန်မာဘာသာ Nederlands Polski Português Русский Türkçe Tiếng Việt

Tableaux bootstrap

❮ Précédent Suivant ❯

Tableau de base Bootstrap

Une table Bootstrap de base a un rembourrage léger et uniquement des séparateurs horizontaux.

La .tableclasse ajoute un style de base à une table :

Exemple

Firstname Lastname Email
John Doe [email protected]
Mary Moe [email protected]
July Dooley [email protected]

Lignes rayées

La .table-stripedclasse ajoute des rayures zébrées à un tableau :

Exemple

Firstname Lastname Email
John Doe [email protected]
Mary Moe [email protected]
July Dooley [email protected]

Tableau bordé

La .table-borderedclasse ajoute des bordures sur tous les côtés du tableau et des cellules :

Exemple

Firstname Lastname Email
John Doe [email protected]
Mary Moe [email protected]
July Dooley [email protected]

Survoler les lignes

La .table-hoverclasse ajoute un effet de survol (couleur de fond grise) sur les lignes du tableau :

Exemple

Firstname Lastname Email
John Doe [email protected]
Mary Moe [email protected]
July Dooley [email protected]

Tableau condensé

La .table-condensedclasse rend une table plus compacte en coupant de moitié le rembourrage des cellules :

Exemple

Firstname Lastname Email
John Doe [email protected]
Mary Moe [email protected]
July Dooley [email protected]

Classes contextuelles

Les classes contextuelles peuvent être utilisées pour colorer les lignes de tableau ( <tr>) ou les cellules de tableau ( <td>) :

Exemple

Firstname Lastname Email
Default Defaultson [email protected]
Success Doe [email protected]
Danger Moe [email protected]
Info Dooley [email protected]
Warning Refs [email protected]
Active Activeson [email protected]

Les classes contextuelles utilisables sont :

Classer La description
.active Applique la couleur de survol à la ligne ou à la cellule du tableau
.success Indique une action réussie ou positive
.info Indique un changement informatif neutre ou une action
.warning Indique un avertissement qui pourrait nécessiter votre attention
.danger Indique une action dangereuse ou potentiellement négative

Tableaux réactifs

La .table-responsiveclasse crée une table réactive. Le tableau défilera alors horizontalement sur les petits appareils (moins de 768px). Lors de la visualisation sur quelque chose de plus grand que 768 pixels de large, il n'y a aucune différence :

Exemple

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

Testez-vous avec des exercices

Exercer:

Ajoutez un attribut de classe pour styliser la table comme une table Bootstrap de base.

<table >
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>[email protected]</td>
  <tr>
  <tr>
    <td>Mary</td>
    <td>Moe</td>
    <td>[email protected]</td>
  </tr>
  <tr>
    <td>July</td>
    <td>Dooley</td>
    <td>[email protected]</td>
  </tr>
<table>

Référence complète de la table Bootstrap

Pour une référence complète de toutes les classes de table, consultez notre référence complète sur les tables Bootstrap .


❮ Précédent Suivant ❯