twitter-bootstrap => les tables

Remarques

Ordre de contenu et tableaux complexes Attention: le style de redistribution de table modifie l'ordre visuel du contenu. Assurez-vous de n'appliquer ce style qu'aux tables de données simples et bien formées (et en particulier, ne l'utilisez pas pour les tableaux de disposition) avec les cellules d'en-tête de table appropriées pour chaque ligne et chaque colonne.

En outre, cette classe ne fonctionnera pas correctement pour les tables comportant des cellules couvrant plusieurs lignes ou colonnes (en utilisant les attributs rowspan ou colspan).

Table de base

Bootstrap définit un style personnalisé pour la table à l'aide de la classe .table . Ajoutez simplement la classe .table à n'importe quelle <table> pour voir les séparateurs horizontaux et le remplissage:

<table class="table">
  <thead><tr><th>First Name</th><th>Last name</th></tr></thead>
  <tbody>
    <tr><td>John</td><td>Doe</td></tr>
    <tr><td>Fred</td><td>Bloggs</td></tr>
  </tbody>
</table>

Table avec un style avancé

Bootstrap fournit quelques classes pour un style de tableau avancé.

Lignes rayées

Vous aurez une table avec des lignes rayées, si vous ajoutez .table-striped classe .table-striped :

<table class="table table-striped">
  <thead><tr><th>First Name</th><th>Last name</th></tr></thead>
  <tbody>
    <tr><td>John</td><td>Doe</td></tr>
    <tr><td>Fred</td><td>Bloggs</td></tr>
  </tbody>
</table>

Notez que:

Les tableaux rayés sont stylés via le sélecteur CSS :nth-child , qui n'est pas disponible dans Internet Explorer 8.

Table bordée

Vous aurez une table avec des bordures sur tous les côtés de la table et des cellules, si vous ajoutez la classe .table-bordered :

<table class="table table-bordered">
  <thead><tr><th>First Name</th><th>Last name</th></tr></thead>
  <tbody>
    <tr><td>John</td><td>Doe</td></tr>
    <tr><td>Fred</td><td>Bloggs</td></tr>
  </tbody>
</table>

Survolez les lignes

Si vous ajoutez la classe .table-hover , vous aurez une table avec des lignes en surbrillance lorsque l'utilisateur survolera une ligne:

<table class="table table-hover">
  <thead><tr><th>First Name</th><th>Last name</th></tr></thead>
  <tbody>
    <tr><td>John</td><td>Doe</td></tr>
    <tr><td>Fred</td><td>Bloggs</td></tr>
  </tbody>
</table>

Table condensée

Si vous ajoutez .table-condensed classe .table-condensed , le remplissage de la cellule par défaut sera réduit de moitié, vous aurez donc une table plus compacte:

<table class="table table-hover">
  <thead><tr><th>First Name</th><th>Last name</th></tr></thead>
  <tbody>
    <tr><td>John</td><td>Doe</td></tr>
    <tr><td>Fred</td><td>Bloggs</td></tr>
  </tbody>
</table>

Classes contextuelles

Les tables bootstrap prennent en charge les couleurs contextuelles. Pour modifier la couleur d'arrière-plan d'une ligne ou d'une cellule de tableau, il vous suffit d'ajouter l'une des classes contextuelles suivantes: .active , .success , .info , .warning , .danger

<table class="table">
  <thead><tr><th>First Name</th><th>Last name</th></tr></thead>
  <tbody>
    <tr class="success"><td>John</td><td>Doe</td></tr>
    <tr><td>Fred</td><td class="info">Bloggs</td></tr>
  </tbody>
</table>

Tables réactives

Vous devez envelopper toute .table dans un conteneur HTML avec la classe .table-responsive pour créer des tables réactives:

<div class="table-responsive">
  <table class="table">
    <thead><tr><th>First Name</th><th>Last name</th></tr></thead>
    <tbody>
      <tr><td>John</td><td>Doe</td></tr>
      <tr><td>Fred</td><td>Bloggs</td></tr>
    </tbody>
  </table>
</div>

Les tableaux réactifs défilent horizontalement sur les petits appareils (<768px). Il n'y aura pas de différences pour les écrans de plus de 768 pixels de large.

Tableau Reflow - En-têtes verticaux

Obtenir un tableau avec des en-têtes verticaux.

Le bootstrap Twitter prend désormais en charge l’en-tête vertical sur une table normale bien formatée. Pour ce faire, utilisez .table-reflow classe .table-reflow

Utilisez la classe twitter bootstrap .table-reflow sur une table bien formée pour obtenir une table avec des en-têtes verticales. De plus, vous pouvez combiner avec l'utilisation de .table-striped et .table-hover pour le .table-hover colonnes cette fois.

<table class="table table-striped table-hover table-reflow">
    <thead>
        <tr>
            <th ><strong> First Name: </strong></th>
            <th ><strong> Last Name: </strong></th>
            <th ><strong> Email: </strong></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td> John </td>
            <td> Doe </td>
            <td> [email protected] </td>
        </tr>
        <tr>
            <td> Joane </td>
            <td> Donald </td>
            <td> [email protected] </td>
        </tr>
    </tbody>
</table>

Vous devriez vérifier les documents Alpha v4 ici: twitter-bootstrap .table-reflow

Modified text is an extract of the original Stack Overflow Documentation

Sous licence CC BY-SA 3.0

Non affilié à Stack Overflow

twitter-bootstrap
les tables

Recherche…