Tailwind CSS Tabellen

Tailwind CSS bietet eine Reihe praktischer Utility-Klassen zum Erstellen und Anpassen von Tabellen.

Mit diesen Utility-Klassen können Sie das Styling von Tabellen einfach steuern, einschließlich Rahmen, Abstände, Ausrichtung, Schriftstile und mehr.

Als Nächstes stellen wir ausführlich vor, wie Sie Tailwind CSS zum Erstellen und Anpassen von Tabellen verwenden.

Grundlegende Tabellenstile

Tailwind CSS bietet einige grundlegende Klassen zur Steuerung des Aussehens und Layouts von Tabellen. Häufig verwendete Utility-Klassen sind table-auto und table-fixed, die zum Festlegen des Tabellenlayouts verwendet werden.

  • table-auto: Standardlayout, die Spaltenbreiten der Tabelle werden automatisch durch den Inhalt bestimmt.
  • table-fixed: Die Spaltenbreiten der Tabelle sind fest. Die Breite aller Spalten wird basierend auf der Gesamtbreite der Tabelle gleichmäßig aufgeteilt, geeignet für Tabellen mit einheitlichen Spaltenbreiten.

Die Verwendung von table-auto ermöglicht es der Tabelle, die Spaltenbreiten automatisch an den Inhalt der Zellen anzupassen.

Beispiel

<table class="table-auto">
  <thead>
    <tr>
      <th>Lied</th>
      <th>Künstler</th>
      <th>Jahr</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>The Sliding Mr. Bones (Next Stop, Pottersville)</td>
      <td>Malcolm Lockyer</td>
      <td>1961</td>
    </tr>
    <tr>
      <td>Witchy Woman</td>
      <td>The Eagles</td>
      <td>1972</td>
    </tr>
    <tr>
      <td>Shining Star</td>
      <td>Earth, Wind, and Fire</td>
      <td>1975</td>
    </tr>
  </tbody>
</table>

Selbst ausprobieren »

Die Verwendung von table-fixed ermöglicht es der Tabelle, den Inhalt zu ignorieren und feste Breiten für Spalten zu verwenden. Die Breite der ersten Zeile legt die Spaltenbreiten für die gesamte Tabelle fest.

Beispiel

<table class="table-fixed">
  <thead>
    <tr>
      <th>Lied</th>
      <th>Künstler</th>
      <th>Jahr</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>The Sliding Mr. Bones (Next Stop, Pottersville)</td>
      <td>Malcolm Lockyer</td>
      <td>1961</td>
    </tr>
    <tr>
      <td>Witchy Woman</td>
      <td>The Eagles</td>
      <td>1972</td>
    </tr>
    <tr>
      <td>Shining Star</td>
      <td>Earth, Wind, and Fire</td>
      <td>1975</td>
    </tr>
  </tbody>
</table>

Selbst ausprobieren »

Rahmen und Abstände

Tailwind bietet viele Utility-Klassen, um Tabellenrahmen, Innenabstände und Außenabstände sowie andere Layout-Details zu steuern.

Sie können Klassen wie border, border-collapse, border-spacing verwenden, um den Rahmenstil der Tabelle zu steuern.

  • border: Fügt der Tabelle Rahmen hinzu.
  • border-collapse: Steuert, ob die Rahmen von Tabellenzellen zusammengefasst werden.
  • border-spacing: Legt den Abstand zwischen den Zellen fest.

Beispiel

<table class="table-auto border-collapse w-full">
  <thead>
    <tr>
      <th class="border px-4 py-2">Überschrift 1</th>
      <th class="border px-4 py-2">Überschrift 2</th>
      <th class="border px-4 py-2">Überschrift 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="border px-4 py-2">Zeile 1, Spalte 1</td>
      <td class="border px-4 py-2">Zeile 1, Spalte 2</td>
      <td class="border px-4 py-2">Zeile 1, Spalte 3</td>
    </tr>
    <tr>
      <td class="border px-4 py-2">Zeile 2, Spalte 1</td>
      <td class="border px-4 py-2">Zeile 2, Spalte 2</td>
      <td class="border px-4 py-2">Zeile 2, Spalte 3</td>
    </tr>
  </tbody>
</table>

Selbst ausprobieren »

Padding und Margin

Mit den Klassen px-* und py-* kannst du den Innenabstand (Padding) von Tabellenzellen festlegen und mit den Klassen m-* und p-* den Außenabstand (Margin) der Tabelle.

Beispiel

<!-- Tabellenzellen-Padding festlegen -->
<table class="table-auto w-full border-collapse">
  <thead>
    <tr>
      <th class="border px-6 py-4">Überschrift 1</th>
      <th class="border px-6 py-4">Überschrift 2</th>
      <th class="border px-6 py-4">Überschrift 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="border px-6 py-4">Zeile 1, Spalte 1</td>
      <td class="border px-6 py-4">Zeile 1, Spalte 2</td>
      <td class="border px-6 py-4">Zeile 1, Spalte 3</td>
    </tr>
  </tbody>
</table>

<!-- Tabellen-Außenabstand festlegen -->
<table class="table-auto w-full border-collapse mt-8">
  <thead>
    <tr>
      <th class="border px-4 py-2">Überschrift 1</th>
      <th class="border px-4 py-2">Überschrift 2</th>
      <th class="border px-4 py-2">Überschrift 3</th>
    </tr>
  </thead>
</table>

Selbst ausprobieren »

Ausrichtung und Textstile

Tailwind bietet Klassen zur Steuerung der Ausrichtung und des Schriftstils von Tabellenzelleninhalten, wie zum Beispiel:

  • text-left, text-center, text-right: Steuert die Textausrichtung.
  • font-semibold, font-bold: Steuert die Schriftstärke.
  • uppercase, lowercase, capitalize: Steuert die Groß-/Kleinschreibung von Text.

Beispiel

<!-- Textausrichtung auf zentriert setzen -->
<table class="table-auto border-collapse w-full">
  <thead>
    <tr>
      <th class="border px-4 py-2 text-center font-bold">Überschrift 1</th>
      <th class="border px-4 py-2 text-center font-bold">Überschrift 2</th>
      <th class="border px-4 py-2 text-center font-bold">Überschrift 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="border px-4 py-2 text-center">Zeile 1, Spalte 1</td>
      <td class="border px-4 py-2 text-center">Zeile 1, Spalte 2</td>
      <td class="border px-4 py-2 text-center">Zeile 1, Spalte 3</td>
    </tr>
  </tbody>
</table>

Selbst ausprobieren »

Zellen zusammenführen

Tailwind CSS unterstützt das Festlegen verbundener Zellen durch HTML-Attribute, wiecolspanundrowspan。

Beispiel

<!-- Spalten zusammenführen -->
<table class="table-auto w-full border-collapse">
  <thead>
    <tr>
      <th class="border px-4 py-2" colspan="2">Überschrift 1 & 2</th>
     <th class="border px-4 py-2">Überschrift 3</th>
   </tr>
 </thead>
 <tbody>
   <tr>
     <td class="border px-4 py-2" colspan="2">Zeile 1, Spalte 1 & 2</td>
     <td class="border px-4 py-2">Zeile 1, Spalte 3</td>
   </tr>
 </tbody>
</table>

Selbst ausprobieren »

Responsive Tabellen

Sie können auch die Responsive-Design-Klassen von Tailwind CSS verwenden, um das Tabellenlayout bei verschiedenen Bildschirmgrößen zu steuern.

Verwenden Sie beispielsweise die Präfixe sm:, md:, lg:, um das Anzeigeverhalten auf verschiedenen Bildschirmen festzulegen.

Beispiel

<!-- Spalten auf kleinen Bildschirmen ausblenden -->
<table class="table-auto w-full border-collapse">
  <thead>
    <tr>
      <th class="border px-4 py-2">Überschrift 1</th>
      <th class="border px-4 py-2 hidden md:table-cell">Überschrift 2</th>
      <th class="border px-4 py-2">Überschrift 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="border px-4 py-2">Zeile 1, Spalte 1</td>
      <td class="border px-4 py-2 hidden md:table-cell">Zeile 1, Spalte 2</td>
      <td class="border px-4 py-2">Zeile 1, Spalte 3</td>
    </tr>
  </tbody>
</table>

Selbst ausprobieren »

Tabellenbeschriftung

Verwenden Siecaption-top, um das caption-Element am oberen Rand der Tabelle zu positionieren.

Beispiel

<table>
  <caption class="caption-top">
    Tabelle 3.1: Profi-Wrestler und ihre Signature Moves.
  </caption>
  <thead>
    <tr>
      <th>Wrestler</th>
      <th>Signature Move(s)</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>"Stone Cold" Steve Austin</td>
      <td>Stone Cold Stunner, Lou Thesz Press</td>
    </tr>
    <tr>
      <td>Bret "The Hitman" Hart</td>
      <td >The Sharpshooter</td>
    </tr>
    <tr>
      <td>Razor Ramon</td>
      <td>Razor's Edge, Fallaway Slam</td>
    </tr>
  </tbody>
</table>

Selbst ausprobieren »

Verwenden Siecaption-bottomPositionieren Sie das caption-Element am unteren Rand der Tabelle.

Beispiel

<table>
  <caption class="caption-bottom">
    Tabelle 3.1: Profi-Wrestler und ihre Signature Moves.
  </caption>
  <thead>
    <tr>
      <th>Wrestler</th>
      <th>Signature Move(s)</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>"Stone Cold" Steve Austin</td>
      <td>Stone Cold Stunner, Lou Thesz Press</td>
    </tr>
    <tr>
      <td>Bret "The Hitman" Hart</td>
      <td >The Sharpshooter</td>
    </tr>
    <tr>
      <td>Razor Ramon</td>
      <td>Razor's Edge, Fallaway Slam</td>
    </tr>
  </tbody>
</table>

Selbst ausprobieren »
Andere Erweiterungen