web-dev-qa-db-fra.com

Application de styles aux tableaux avec Twitter Bootstrap

Est-ce que quelqu'un sait s'il est possible d'appliquer des styles sur des tables avec Twitter Bootstrap? Je peux voir des exemples de tableaux dans certains tutoriels plus anciens, mais pas sur le site Bootstrap.

J'ai essayé de le configurer, mais aucun style n'a été appliqué aux tableaux de ma page.

<table>
    <thead>
        <tr>
            <th>#</th>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Language</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>Some</td>
            <td>One</td>
            <td>English</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Joe</td>
            <td>Sixpack</td>
            <td>English</td>
        </tr>
    </tbody>
</table>

Quelles classes dois-je appliquer?

twitter-bootstrap
72
Chin

Bootstrap propose différents styles de table. Jetez un œil à Base CSS - Tables pour obtenir de la documentation et des exemples.

Le style suivant donne de belles tables:

<table class="table table-striped table-bordered table-condensed">
  ...
</table>
179
Ivo Bosticky

Les tables Twitter bootstrap peuvent être stylées et bien conçues. Vous pouvez styler votre table en ajoutant simplement des classes sur votre table et elle aura l’air agréable. Vous pouvez l’utiliser dans vos rapports de données, en affichant des informations, etc.

enter image description here Vous pouvez utiliser :

basic table
Striped rows
Bordered table
Hover rows
Condensed table
Contextual classes
Responsive tables

Rangée de rayures

    <table class="table table-striped" width="647">
    <thead>
    <tr>
    <th>#</th>
    <th>Name</th>
    <th>Address</th>
    <th>mail</th>
    </tr>
    </thead>
    <tbody>
    <tr>
    <td>1</td>
    <td>Thomas bell</td>
    <td>Brick lane, London</td>
    <td>[email protected]</td>
    </tr>
    <tr>
    <td height="29">2</td>
    <td>Yan Chapel</td>
    <td>Toronto Australia</td>
    <td>[email protected]</td>
    </tr>
    <tr>
    <td>3</td>
    <td>Pit Sampras</td>
    <td>Berlin, Germany</td>
    <td>Pit @yahoo.com</td>
    </tr>
    </tbody>
    </table>

Tableau condensé:

Pour compacter une table, vous devez ajouter class class = "table-condensed".

    <table class="table table-condensed" width="647">
    <thead>
    <tr>
    <th>#</th>
    <th>Sample Name</th>
    <th>Address</th>
    <th>Mail</th>
    </tr>
    </thead>
    <tbody>
    <tr>
    <td>1</td>
    <td>Thomas bell</td>
    <td>Brick lane, London</td>
    <td>[email protected]</td>
    </tr>
    <tr>
    <td height="29">2</td>
    <td>Yan Chapel</td>
    <td>Toronto Australia</td>
    <td>[email protected]</td>
    </tr>
    <tr>
    <td>3</td>
    <td>Pit Sampras</td>
    <td>Berlin, Germany</td>
    <td>Pit @yahoo.com</td>
    </tr>
    <tr>
    <td></td>
    <td colspan="3" align="center"></td>
    </tr>
    </tbody>
    </table>

Réf.: http://twitterbootstrap.org/Twitter-bootstrap-table-example-tutorial

31
Mujahidul Jahid

Vous pouvez également appliquer des classes TR: info, erreur, avertissement ou succès.

10
user1695595

Juste une autre belle table. J'ai ajouté la classe "table-hover" parce qu'elle donne un effet de survol agréable.

   <h3>NATO Phonetic Alphabet</h3>    
   <table class="table table-striped table-bordered table-condensed table-hover">
   <thead>
    <tr> 
        <th>Letter</th>
        <th>Phonetic Letter</th>

    </tr>
    </thead>
  <tr>
    <th>A</th>
    <th>Alpha</th>

  </tr>
  <tr>
    <td>B</td>
    <td>Bravo</td>

  </tr>
  <tr>
    <td>C</td>
    <td>Charlie</td>

  </tr>

</table>
8
itmilos

vous pouvez ajouter des classes contextuelles à chaque ligne comme suit:

<tr class="table-success"></tr>
<tr class="table-error"></tr>
<tr class="table-warning"></tr>
<tr class="table-info"></tr>
<tr class="table-danger"></tr>

Vous pouvez également les ajouter aux données de la table comme ci-dessus

Vous pouvez définir la taille de votre table en définissant les classes comme table-sm et ainsi de suite.

Vous pouvez ajouter des classes personnalisées et ajouter votre propre style:

<table class="table">
  <thead style = "color:red;background-color:blue">
    <tr>
      <th></th>
      <th>First Name</th>
      <th>Last Name</th>
    </tr>
  </thead>
  <tbody>
    <tr>   
      <td>Asdf</td>
      <td>qwerty</td>
    </tr>
  </tbody>
</table>

De cette façon, vous pouvez ajouter un style personnalisé. J'ai montré le style en ligne, par exemple, pour savoir comment cela fonctionne. Vous pouvez également ajouter des classes et les appeler dans votre css.

0
Mohan Prasad

bootstrap fournit différentes classes pour la table

 <table class="table"></table>
 <table class="table table-bordered"></table>
 <table class="table table-hover"></table>
 <table class="table table-condensed"></table>
 <table class="table table-responsive"></table>
0
Uiupdates