Table

De tabel van dit framework is responsief en kan met of zonder randen, met of zonder zebra, 100% breedte of breedte ten opzichte van de inhoud en de tabel kan worden gecentreerd.

Basis

Naam Geslacht Leeftijd
Kees Man 23
Jessica Vrouw 47
Gerard Man 12 
<div class="table">
  <table>
      <tr>
        <th>Titel</th>
        <th>Titel</th>
        <th>Titel</th>
      </tr>
      <tr>
        <td>Tekst</td>
        <td>Tekst</td>
        <td>Tekst</td>
      </tr>
  </table>	
</div>

Zonder randen table no-border

Naam Geslacht Leeftijd
Kees Man 23
Jessica Vrouw 47
Gerard Man 12 
<div class="table no-border">
  <table>
      <tr>
        <th>Titel</th>
        <th>Titel</th>
        <th>Titel</th>
      </tr>
      <tr>
        <td>Tekst</td>
        <td>Tekst</td>
        <td>Tekst</td>
      </tr>
  </table>	
</div>

Zonder zebra table no-zebra

Naam Geslacht Leeftijd
Kees Man 23
Jessica Vrouw 47
Gerard Man 12 
<div class="table no-zebra">
  <table>
      <tr>
        <th>Titel</th>
        <th>Titel</th>
        <th>Titel</th>
      </tr>
      <tr>
        <td>Tekst</td>
        <td>Tekst</td>
        <td>Tekst</td>
      </tr>
  </table>	
</div>

Met hover table table-hover

Naam Geslacht Leeftijd
Kees Man 23
Jessica Vrouw 47
Gerard Man 12 
<div class="table table-hover">
  <table>
      <tr>
        <th>Titel</th>
        <th>Titel</th>
        <th>Titel</th>
      </tr>
      <tr>
        <td>Tekst</td>
        <td>Tekst</td>
        <td>Tekst</td>
      </tr>
  </table>	
</div>

Centreer table table fit-content box-center"

Naam Geslacht Leeftijd
Kees Man 23
Jessica Vrouw 47
Gerard Man 12 
<div class="table  fit-content box-center">
  <table>
      <tr>
        <th>Titel</th>
        <th>Titel</th>
        <th>Titel</th>
      </tr>
      <tr>
        <td>Tekst</td>
        <td>Tekst</td>
        <td>Tekst</td>
      </tr>
  </table>	
</div>

Responsive

Head Head Head Head Head Head Head Head Head Head Head Head Head Head Head Head Head Head Head Head Head Head
Contents Contents Contents Contents Contents Contents Contents Contents Contents Contents Contents Contents Contents Contents Contents Contents Contents Contents Contents Contents Contents Contents
Contents Contents Contents Contents Contents Contents Contents Contents Contents Contents Contents Contents Contents Contents Contents Contents Contents Contents Contents Contents Contents Contents

Kleur

Head Head
Content Content

Kleurpalet

Klik op een kleur om de table te wijzigen en de code zichtbaar te maken!