twitter-bootstrap => Tabellen

Bemerkungen

Inhaltsreihenfolge und komplexe Tabellen Beachten Sie, dass der Stil der Tabellenumwandlung die visuelle Reihenfolge des Inhalts ändert. Stellen Sie sicher, dass Sie diesen Stil nur auf wohlgeformte und einfache Datentabellen anwenden (und insbesondere nicht für Layouttabellen verwenden), wobei für jede Zeile und Spalte die entsprechenden Tabellenkopfzeilen vorhanden sind.

Darüber hinaus funktioniert diese Klasse nicht ordnungsgemäß für Tabellen mit Zellen, die sich über mehrere Zeilen oder Spalten erstrecken (mit Rowspan- oder Colspan-Attributen).

Grundtabelle

Bootstrap definiert ein benutzerdefiniertes Styling für eine Tabelle mit der Klasse .table . .table einfach die .table Klasse zu einer beliebigen <table> , um horizontale Trennlinien und Füllungen .table :

<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>

Tisch mit modernem Styling

Bootstrap bietet eine Reihe von Klassen für die erweiterte Tabellengestaltung.

Gestreifte Reihen

Sie haben eine Tabelle mit gestreiften Zeilen, wenn Sie die Klasse .table-striped hinzufügen:

<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>

Beachten Sie, dass:

Gestreifte Tabellen werden über den :nth-child CSS-Selektor gestaltet, der in Internet Explorer 8 nicht verfügbar ist.

Tisch mit Rahmen

Sie haben eine Tabelle mit Rändern an allen Seiten der Tabelle und Zellen, wenn Sie die Klasse mit dem Zusatz " .table-bordered hinzufügen:

<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>

Schweben Sie in den Reihen

Wenn Sie die .table-hover Klasse hinzufügen, haben Sie eine Tabelle mit hervorgehobenen Zeilen, wenn der Benutzer über eine Zeile .table-hover :

<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>

Kurzer Tisch

Wenn Sie die .table-condensed Klasse hinzufügen, wird die Standardauffüllung der Zelle halbiert, sodass Sie eine kompaktere Tabelle haben:

<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>

Kontextuelle Klassen

Bootstrap-Tabellen unterstützen kontextabhängige Farben. Um die Hintergrundfarbe einer Tabellenzeile oder Zelle zu ändern, müssen Sie lediglich eine der folgenden kontextuellen Klassen .active : .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>

Responsive Tabellen

Sie müssen jede .table in den HTML-Container mit der .table-responsive Klasse .table-responsive , um responsive Tabellen zu erstellen:

<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>

Responsive Tabellen werden auf kleinen Geräten horizontal gescrollt (<768px). Bei Bildschirmen mit einer Breite von mehr als 768 Pixeln gibt es keine Unterschiede.

Table Reflow - Vertikale Header

Eine Tabelle mit vertikalen Kopfzeilen erhalten.

Twitter Bootstrap unterstützt jetzt vertikale Header auf einer gut formatierten normalen Tabelle. Um dies zu erreichen, verwenden .table-reflow einfach die .table-reflow Klasse

Verwenden Sie die .table-reflow Klasse twitter bootstrap für eine gut geformte Tabelle, um eine Tabelle mit vertikalen Headern zu erhalten. Außerdem können Sie .table-striped die Verwendung von .table-striped und .table-hover für das Schweben auf Spalten verwenden.

<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>

Sie sollten die v4-Alpha-Dokumente hier überprüfen: twitter-bootstrap .table-reflow

Modified text is an extract of the original Stack Overflow Documentation

Lizenziert unter CC BY-SA 3.0

Nicht angeschlossen an Stack Overflow

twitter-bootstrap
Tabellen

Suche…