Table

Options

Classe Elément Description
.table
.tableS
.tableXS
.tableL
<table> Créer un tableau.
tableStriped <table> Ajouter des rayures au tableau.
tableMiddle <table> Ajoute un centrage vertical des cellules.
tableJustify <table> Supprime les marges de la première et de la dernière colonne pour que le contenu soit aligné sur le tableau.
tableResponsive[XS, S, M, L, XL] <table> Rendre le tableau responsive suivant la résolution de l'écran.
compress <th>
<td>
Compresse la colonne au maximum.
Ajouter la classe uniquemet sur un élément <th> ou <td> pour affectée l'ensemble de la colonne du tableau.

Complémentarités intéressantes

Classe Elément Description
.overflowAuto <div> Permet de ne pas dépasser la largeur de la page.
.width[S, XS, M, L, XL] <th>
<td>
Applique un largeur à une colonne.
Ajouter la classe uniquemet sur un élément <th> ou <td> pour affectée l'ensemble de la colonne du tableau.
.minWidth[S, XS, M, L, XL] <th>
<td>
Applique un largeur minimum à une colonne.
Ajouter la classe uniquemet sur un élément <th> ou <td> pour affectée l'ensemble de la colonne du tableau.
.maxWidth[S, XS, M, L, XL] <th>
<td>
Applique un largeur maximum à une colonne.
Ajouter la classe uniquemet sur un élément <th> ou <td> pour affectée l'ensemble de la colonne du tableau.
.nowrap <th>
<td>
Permet d'afficher le texte d'une cellule sur une ligne.
truncate <th>
<td>
Permet d'afficher le texte d'une cellule sur une ligne et de tronquer le texte s'il dépasse.
.center
.left
.right
<th>
<td>
Aligner le texte d'une cellule.

Exemples

Tableau simple

Colonne 1 Colonne 2 Colonne 3
Ligne 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ligne 2 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<div class="overflowAuto">
    <table class="table">
        <thead>
        <tr>
            <th class="nowrap">Colonne 1</th>
            <th class="minWidthS">Colonne 2</th>
            <th>Colonne 3</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>Ligne 1</td>
            <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</td>
            <td><button>Button</button></td>
        </tr>
        <tr>
            <td>Ligne 2</td>
            <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</td>
            <td><button>Button</button></td>
        </tr>
        </tbody>
    </table>
</div>

Exemple 2

Petit tableau centré, justifié et rayé.

Colonne 1 Colonne 2 Colonne 3
Ligne 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ligne 2 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ligne 3 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ligne 4 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<div class="overflowAuto">
    <table class="tableS tableStriped tableJustify tableMiddle">
        <thead>
        <tr>
            <th class="nowrap">Colonne 1</th>
            <th class="minWidthS">Colonne 2</th>
            <th>Colonne 3</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>Ligne 1</td>
            <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</td>
            <td><button>Button</button></td>
        </tr>
        <tr>
            <td>Ligne 2</td>
            <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</td>
            <td><button>Button</button></td>
        </tr>
        <tr>
            <td>Ligne 3</td>
            <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</td>
            <td><button>Button</button></td>
        </tr>
        <tr>
            <td>Ligne 4</td>
            <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</td>
            <td><button>Button</button></td>
        </tr>
        </tbody>
    </table>
</div>

Exemple 3

Grand tableau

Colonne 1 Colonne 2 Colonne 3
Ligne 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ligne 2 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<div class="overflowAuto">
    <table class="tableL">
        <thead">
        <tr>
            <th class="compress nowrap">Colonne 1</th>
            <th class="minWidthS">Colonne 2</th>
            <th class="compress nowrap">Colonne 3</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>Ligne 1</td>
            <td class="truncate">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</td>
            <td><button>Button</button></td>
        </tr>
        <tr>
            <td>Ligne 2</td>
            <td class="truncate">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</td>
            <td><button>Button</button></td>
        </tr>
        </tbody>
    </table>
</div>

Exemple 4

Tableau responsive.

Nom Prénom Date de naissance
DUPONT Jean 23/05/1978
DURAND Sophie 11/11/1970
PHILIPPE Nicolas 03/05/1960
<table class="table tableResponsiveS">
    <thead>
    <tr>
        <th>Nom</th>
        <th>Prénom</th>
        <th>Date de naissance</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>DUPONT</td>
        <td>Jean</td>
        <td>23/05/1978</td>
    </tr>
    <tr>
        <td>DURAND</td>
        <td>Sophie</td>
        <td>11/11/1970</td>
    </tr>
    <tr>
        <td>PHILIPPE</td>
        <td>Nicolas</td>
        <td>03/05/1960</td>
    </tr>
    </tbody>
</table>