@casoon/dragonfly/ui/components/table.css

Modular, lightweight CSS framework and design system for modern web projects. Optimized for Astro JS, LightningCSS and Container Queries with @layer-based architecture and comprehensive accessibility.

/*
 * Table-Komponente
 *
 * Gestylte Tabellen mit responsivem Verhalten.
 */

/**
 * Table-Komponente
 * 
 * Tabellen und Datenraster für strukturierte Informationsdarstellung.
 * Tabellen eignen sich für den Vergleich von Daten und die Darstellung von strukturierten Informationen.
 * 
 * @layer components.table
 * 
 * Grundlegende Verwendung:
 * <table class="table">
 *   <thead>
 *     <tr>
 *       <th>Spalte 1</th>
 *       <th>Spalte 2</th>
 *     </tr>
 *   </thead>
 *   <tbody>
 *     <tr>
 *       <td>Zelle 1</td>
 *       <td>Zelle 2</td>
 *     </tr>
 *   </tbody>
 * </table>
 * 
 * Varianten:
 * <table class="table striped">...</table>  <!-- Abwechselnd gefärbte Zeilen -->
 * <table class="table bordered">...</table>  <!-- Mit Rahmen -->
 * <table class="table hoverable">...</table> <!-- Hover-Effekt für Zeilen -->
 * <table class="table compact">...</table>   <!-- Kompaktes Layout -->
 * <table class="table responsive">...</table> <!-- Responsives Layout -->
 * 
 * Zellenausrichtung:
 * <td class="left">Links ausgerichtet</td>
 * <td class="center">Zentriert</td>
 * <td class="right">Rechts ausgerichtet</td>
 * 
 * Statuszeilen:
 * <tr class="success">...</tr>
 * <tr class="warning">...</tr>
 * <tr class="danger">...</tr>
 * 
 * Flüssige Größenanpassung mit Schlüsselwörtern:
 * <table class="table fluid">...</table>
 * <table class="table fluid small">...</table>
 * <table class="table fluid medium">...</table>
 * <table class="table fluid large">...</table>
 * 
 * Container-adaptive Tabelle:
 * <div class="container-query">
 *   <table class="table adaptive">...</table>
 * </div>
 */

@layer components {
  .table {
    border-collapse: collapse;
    font-size: var(--text-sm, var(--font-size-sm, 0.875rem));
    width: 100%;
    
    /* Basiselemente */
    thead {
      background-color: var(--color-neutral-100, #f3f4f6);
    }
    
    th,
    td {
      border: 1px solid var(--color-border, var(--color-neutral-300, #d1d5db));
      padding: var(--table-cell-padding, var(--space-3, 0.75rem));
      text-align: left;
    }
    
    th {
      color: var(--color-text, var(--color-neutral-900, #111827));
      font-weight: var(--font-semibold, var(--font-weight-semibold, 600));
      padding: var(--table-header-padding, 1rem 0.75rem);
    }
    
    td {
      color: var(--color-text-muted, var(--color-neutral-700, #374151));
    }
    
    /* Tabellen-Varianten */
    &.striped tbody tr:nth-child(odd) {
      background-color: var(--color-neutral-50, #f9fafb);
    }
    
    &.hoverable tbody tr:hover {
      background-color: var(--color-neutral-100, #f3f4f6);
      transition: background-color var(--transition-duration-fast, 150ms) var(--transition-timing-ease, ease);
    }
    
    &.bordered th,
    &.bordered td {
      border: 1px solid var(--color-border, var(--color-neutral-300, #d1d5db));
    }
    
    &.compact th,
    &.compact td {
      padding: var(--space-2, 0.5rem);
    }
    
    /* Flüssige Größenanpassung mit interpolate-size: allow-keywords */
    &.fluid {
      /* Nutzt CSS-Schlüsselwörter für Größen - funktioniert mit interpolate-size: allow-keywords */
      font-size: medium; /* Basis-Größe für Skalierungsfaktor */
      
      th, td {
        font-size: 0.875em;
        padding: 0.75em;
      }
      
      thead {
        font-weight: var(--font-semibold, 600);
      }
      
      /* Größenvarianten mit CSS-Schlüsselwörtern */
      &.small {
        font-size: small;
      }
      
      &.medium {
        font-size: medium;
      }
      
      &.large {
        font-size: large;
      }
      
      &.x-large {
        font-size: x-large;
      }
    }
    
    /* Container-adaptive Größenanpassung */
    &.adaptive {
      font-size: clamp(var(--text-xs, 0.75rem), 2cqi, var(--text-base, 1rem));
      
      th, td {
        padding: clamp(var(--space-1, 0.25rem), 1cqi, var(--space-4, 1rem));
      }
      
      @container (min-width: 300px) {
        th {
          font-weight: var(--font-bold, var(--font-weight-bold, 700));
        }
      }
      
      @container (min-width: 500px) {
        thead {
          position: sticky;
          top: 0%;
          z-index: 1;
        }
      }
      
      @container (min-width: 700px) {
        &.hoverable tbody tr:hover {
          box-shadow: var(--shadow-sm, 0 1px 2px 0 rgb(0 0 0 / 5%));
        }
      }
    }
    
    &.responsive {
      @media (max-width: 768px) {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
      }
    }
    
    /* Zellenausrichtungen */
    .left {
      text-align: left;
    }
    
    .center {
      text-align: center;
    }
    
    .right {
      text-align: right;
    }
    
    /* Statuszeilen */
    .success {
      background-color: var(--color-success-100, #d1fae5);
      color: var(--color-success-800, #065f46);
    }
    
    .warning {
      background-color: var(--color-warning-100, #fef3c7);
      color: var(--color-warning-800, #92400e);
    }
    
    .danger {
      background-color: var(--color-error-100, #fee2e2);
      color: var(--color-error-800, #991b1b);
    }
  }
}