twitter-bootstrap => tabellen

Opmerkingen

Inhoudsvolgorde en complexe tabellen Let op dat de stijl voor het opnieuw plaatsen van de tabel de visuele volgorde van inhoud wijzigt. Zorg ervoor dat u deze stijl alleen toepast op goed gevormde en eenvoudige gegevenstabellen (en deze in het bijzonder niet gebruiken voor lay-outtabellen) met de juiste tabelkopcellen voor elke rij en kolom.

Bovendien werkt deze klasse niet correct voor tabellen met cellen die meerdere rijen of kolommen beslaan (met behulp van attributen voor rowspan of colspan).

Basistabel

Bootstrap definieert een aangepaste stijl voor de tabel met behulp van de klasse .table . Voeg de klasse .table aan elke <table> om horizontale scheidingslijnen en opvulling te zien:

<table class="table">
  <thead><tr><th>First Name</th><th>Last name</th></tr></thead>
  <tbody>
    <tr><td>John</td><td>Doe</td></tr>
    <tr><td>Fred</td><td>Bloggs</td></tr>
  </tbody>
</table>

Tafel met geavanceerde styling

Bootstrap biedt een aantal klassen voor geavanceerde tafelstijlen.

Gestreepte rijen

Je hebt een tabel met gestreepte rijen, als je klasse .table-striped toevoegt:

<table class="table table-striped">
  <thead><tr><th>First Name</th><th>Last name</th></tr></thead>
  <tbody>
    <tr><td>John</td><td>Doe</td></tr>
    <tr><td>Fred</td><td>Bloggs</td></tr>
  </tbody>
</table>

Let daar op:

Gestreepte tabellen worden gestileerd via de :nth-child CSS-selector, die niet beschikbaar is in Internet Explorer 8.

Grenzen tafel

Je hebt een tabel met randen aan alle kanten van de tabel en cellen, als je klasse met .table-bordered toevoegt:

<table class="table table-bordered">
  <thead><tr><th>First Name</th><th>Last name</th></tr></thead>
  <tbody>
    <tr><td>John</td><td>Doe</td></tr>
    <tr><td>Fred</td><td>Bloggs</td></tr>
  </tbody>
</table>

Beweeg over rijen

Als u de klasse .table-hover toevoegt, krijgt u een tabel met gemarkeerde rijen wanneer de gebruiker over een rij zweeft:

<table class="table table-hover">
  <thead><tr><th>First Name</th><th>Last name</th></tr></thead>
  <tbody>
    <tr><td>John</td><td>Doe</td></tr>
    <tr><td>Fred</td><td>Bloggs</td></tr>
  </tbody>
</table>

Gecondenseerde tafel

Als u .table-condensed class toevoegt, wordt de standaard .table-condensed in tweeën gesneden, zodat u een compactere tabel hebt:

<table class="table table-hover">
  <thead><tr><th>First Name</th><th>Last name</th></tr></thead>
  <tbody>
    <tr><td>John</td><td>Doe</td></tr>
    <tr><td>Fred</td><td>Bloggs</td></tr>
  </tbody>
</table>

Contextuele klassen

Bootstrap-tabellen ondersteunen contextuele kleuren. Om de achtergrondkleur van een tabelrij of cel te wijzigen, hoeft u alleen maar een van de volgende contexuele klassen toe te voegen: .active , .success , .info , .warning , .danger

<table class="table">
  <thead><tr><th>First Name</th><th>Last name</th></tr></thead>
  <tbody>
    <tr class="success"><td>John</td><td>Doe</td></tr>
    <tr><td>Fred</td><td class="info">Bloggs</td></tr>
  </tbody>
</table>

Responsieve tabellen

U moet elke .table in html-container met .table-responsive class .table-responsive om responsieve tabellen te maken:

<div class="table-responsive">
  <table class="table">
    <thead><tr><th>First Name</th><th>Last name</th></tr></thead>
    <tbody>
      <tr><td>John</td><td>Doe</td></tr>
      <tr><td>Fred</td><td>Bloggs</td></tr>
    </tbody>
  </table>
</div>

Responsieve tabellen worden horizontaal weergegeven op kleine apparaten (<768 px). Er zijn geen verschillen voor schermen groter dan 768px breed.

Tabel opnieuw plaatsen - verticale kopteksten

Een tafel krijgen met verticale headers.

Twitter-bootstrap ondersteunt nu verticale koptekst op een goed opgemaakte normale tabel. Gebruik hiervoor gewoon de klasse .table-reflow

Gebruik de klasse Twitter bootstrap .table-reflow op een goed gevormde tafel om een tafel met verticale kopteksten te maken. Bovendien kunt u combineren met het gebruik van .table-striped en .table-hover om deze keer op kolommen te zweven.

<table class="table table-striped table-hover table-reflow">
    <thead>
        <tr>
            <th ><strong> First Name: </strong></th>
            <th ><strong> Last Name: </strong></th>
            <th ><strong> Email: </strong></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td> John </td>
            <td> Doe </td>
            <td> [email protected] </td>
        </tr>
        <tr>
            <td> Joane </td>
            <td> Donald </td>
            <td> [email protected] </td>
        </tr>
    </tbody>
</table>

Bekijk hier de v4 -alfadocumenten : twitter-bootstrap .table-reflow

Modified text is an extract of the original Stack Overflow Documentation

Licentie onder CC BY-SA 3.0

Niet aangesloten bij Stack Overflow

twitter-bootstrap
tabellen

Zoeken…