Application de styles aux tables avec Twitter Bootstrap

Question

Quelqu'un sait-il si il est possible d’appliquer des styles sur les tables avec Twitter Bootstrap ? Je peux voir des exemples de table dans des tutoriaux plus âgés mais pas sur le site « bootstrap » lui-même.

J’ai essayé de mettre en place, mais les tables dans ma page n’ont presque aucun style appliqué à eux.

Quelles classes dois j’appliquer ?

Answer 1

Bootstrap vous propose différents styles de tableau. Jetez un oeil à Base de CSS - Tables pour la documentation et des exemples.

Le style suivant donne de grands tableaux à la recherche :

Answer 2

Twitter bootstrap table peut être stylé et bien conçu. Voulez-vous savoir cela ? Vous pouvez p style à votre table, tout en ajoutant quelques classes sur votre table, et ça a l'air sympa.Vous mat utiliser sur votre rapport de données, l'affichage d'informations etc.

Vous pouvez utiliser :

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

Rayé de lignes de la Table :

    <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>thomas@yahoo.com</td>
    </tr>
    <tr>
    <td height="29">2</td>
    <td>Yan Chapel</td>
    <td>Toronto Australia</td>
    <td>Yan@yahoo.com</td>
    </tr>
    <tr>
    <td>3</td>
    <td>Pit Sampras</td>
    <td>Berlin, Germany</td>
    <td>Pit @yahoo.com</td>
    </tr>
    </tbody>
    </table>

Condensé de la table :

Compactage d'une table, vous devez ajouter class="table 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>thomas@yahoo.com</td>
    </tr>
    <tr>
    <td height="29">2</td>
    <td>Yan Chapel</td>
    <td>Toronto Australia</td>
    <td>Yan@yahoo.com</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>

Ref : http://twitterbootstrap.org/twitter-bootstrap-table-example-tutorial

Answer 3

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

Answer 4

Juste une autre bonne table à la recherche. J’ai ajouté des classe « table-hover » parce qu’il donne un bel effet planant.