Uyumlu tablolar

Büyük veri tabloları, sütunlar taştığı veya okunabilirliği engelleyecek kadar küçüldüğü için küçük ekranlarda genellikle okunamaz hale gelir. Bu kılavuzda, kaydırma sırasında başlıkların görünür kalmasını sağlamak için yapışkan konumlandırmanın nasıl kullanılacağı ve alan sınırlı olduğunda tablonun mobil uyumlu "yığın" düzene nasıl dönüştürüleceği gösterilmektedir.

Önerilen Yaklaşım

Duyarlı bir tablonun temelinde, veri hücreleri ile başlıkları arasındaki ilişkiyi korumak yer alır.

1. Anlamsal temel: <thead>, <tbody> ve <th> öğeleriyle standart <table> öğelerini kullanın.
2. Yapışkan Bağlam: position: sticky hem sütun başlıklarına hem de satır başlıklarına uygulanır. Bu sayede, kullanıcılar herhangi bir yönde ne kadar kaydırırsa kaydırsın, verilerin neyi temsil ettiğini her zaman görebilir.
3. Uyarlanabilir dönüşümler: @media sorguları yerine @container sorgularını kullanın. Bu sayede tablo, tüm görüntüleme alanı yerine kendi genişliğine göre (ör. bir kenar çubuğuna veya dar bir kontrol paneli widget'ına yerleştirildiğinde) uyarlanabilir.
4. Etiket ekleme: Yığın düzende <thead> gizlenir ve ::before sözde öğeleri ile CSS değişkenleri kullanılarak her hücreye erişilebilir başlıklar eklenir.

Uygulama Adımları

1. İşaretleme ve Düzen

Tablonuzu standart semantik başlıklarla yapılandırın. Taşmayı yönetmek ve sorgular için bir kapsayıcı sağlamak üzere .table-wrapper kullanın. Yalnızca klavye kullanan kişilerin tabloyu tutarlı bir şekilde kaydırabilmesi için kapsayıcıya tabindex="0" özelliği ekleyin.

Amacını belirtmek için sarmalayıcıya bir role="region" özelliği verin. aria-labelledby (tabloya başlık/ad veren mevcut bir öğenin id özelliğine referans vererek) veya aria-label özelliğini kullanarak tabloya erişilebilir özellikli bir ad verin.

<div tabindex="0" role="region" aria-labelledby="employee-table-caption" class="table-wrapper">
  <table>
    <caption id="employee-table-caption">Current employee directory</caption>
    <thead>
      <tr>
        <th>Employee</th>
        <th>Role</th>
        <th>Status</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <!-- Row header remains sticky horizontally on desktop, 
             and becomes a sticky card header on mobile -->
        <th>Alex Rivera</th>
        <td>Engineer</td>
        <td>Active</td>
      </tr>
    </tbody>
  </table>
</div>

2. Yapışkan başlıkları yapılandırma

Kaydırmayı etkinleştirin ve başlıkları yapışkan hale getirin. Yığınlama sırasını yönetmek için mantıksal özellikleri ve açık z-index değerlerini kullanın.

.table-wrapper {
  overflow: auto;
  max-inline-size: 100%;
  max-block-size: min(500px, 80vh);
  container-type: inline-size;
}

table {
  border-collapse: separate;
  border-spacing: 0;
}

/* Sticky column headers (desktop) */
thead {
  position: sticky;
  inset-block-start: 0;
  z-index: 1; /* Above sticky row headers */
}

/* Sticky row headers (desktop) */
tbody th {
  position: sticky;
  inset-inline-start: 0;
  background: white; /* Required to cover background during scroll */
}

3. Duyarlı Üst Üste Düzen

Alan sınırlı olduğunda orijinal başlık satırını gizleyin ve tabloyu kartlara dönüştürün. Sözde öğeleri kullanarak etiket ekleyin. Yalnızca metin olmayan içerikler için alternatif metin sağlayın. Aksi takdirde, hem metin içeriği hem de erişilebilir özellikli ad ekran okuyucular tarafından okunabilir.

@container (width < 600px) {
  table, thead, tbody, tr, th, td {
    display: block;
  }

  thead {
    /* MANDATORY: Hide column header from layout and screen readers. */
    display: none
  }

  tr {
    margin-block-end: 1.5rem;
    border: 1px solid #ccc;
  }

  /* Sticky row headers at the top of each block/card */
  tbody th {
    position: sticky;
    inset-block-start: 0;
    z-index: 2;
    background: #eee;
  }

  /* Define column labels as CSS variables (often set via JS) */
  table {
    --label-1: "Employee";
    --label-2: "Role";
    --label-3: "Status";
  }

  /* Inject labels */
  td:nth-child(2)::before {
    /* MANDATORY: If using non-text content, provide the accessible name (after the /) which ensures screen readers hear the text alternative. */
    content: var(--label-2) ": ";
  }
  /* MANDATORY: Map the label for each column */
  td:nth-child(3)::before {
    content: var(--label-3) ": ";
  }
}