Tables

@todo

Présentation

Le module table de Scampi est une copie quasi conforme de son homologue de Bootstrap, les principales différences sont que les variables et mixins sont définis dans le module et que des mixins sont utilisés pour générer les styles.

Nous ajoutons aussi des styles de base pour l’élément caption.

Les classes disponibles sont .table, .table-sm, .table-bordered, .table-striped, .table-hover, .table-responsive, .table-row-variant, .table-inverse.

Utilisation

Configuration

Les variables proposées dans ce module sont :

  • $table-cell-padding : padding des cellules, sa valeur par défaut est .75em
  • $table-sm-cell-padding : padding des cellules en affichage mobile, sa valeur par défaut est .25em
  • $table-bg : couleur de fond, sa valeur par défaut est transparent
  • $table-bg-accent : couleur de fond, sa valeur par défaut est $gray-9
  • $table-bg-hover : couleur de fond au survol, sa valeur par défaut est $gray-10
  • $table-bg-active : couleur de fond , sa valeur par défaut est $table-bg-hover
  • $table-border-width : bordure, sa valeur par défaut est $border-width
  • $table-border-color : couleur de la bordure, sa valeur par défaut est $gray-9
  • $table-inverse-bg-color : couleur de fond "inverse", sa valeur par défaut est $gray-1
  • $table-inverse-text-color : couleur de texte "inverse", sa valeur par défaut est #fff
  • $table-inverse-border-color : couleur de la bordure "inverse", sa valeur par défaut est $gray-9

Exemple d’utilisation

<table class="table">
  <caption>Liste d’utilisateur</caption>
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>
<table class="table table-inverse">

[...]

</table>
<table class="table">
  <thead class="thead-inverse">
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
  </thead>

  [...]

</table>
<table class="table table-striped">

  [...]

</table>
<table class="table table-striped table-inverse">

  [...]

</table>
<table class="table table-bordered">

  [...]

</table>
<table class="table table-bordered table-inverse">

  [...]

</table>
<table class="table table-hover">

  [...]

</table>
<table class="table table-hover table-inverse">

  [...]

</table>
<table class="table table-sm">

  [...]

</table>
<table class="table table-sm table-inverse">

  [...]

</table>
<!-- On rows -->
<tr class="table-active">...</tr>
<tr class="table-success">...</tr>
<tr class="table-warning">...</tr>
<tr class="table-danger">...</tr>
<tr class="table-info">...</tr>

<!-- On cells (`td` or `th`) -->
<tr>
  <td class="table-active">...</td>
  <td class="table-success">...</td>
  <td class="table-warning">...</td>
  <td class="table-danger">...</td>
  <td class="table-info">...</td>
</tr>
<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>