📋 Таблица данных

Четыре варианта таблицы

Базовая таблица

Числа справа и tabular-nums — разряды совпадают по вертикали.

Заказ Клиент Статус Сумма
№ 1042 Смирнова А. Оплачен 12 400
№ 1043 Ковалёв И. Ожидает 8 900
№ 1044 Титова Е. Ошибка оплаты 3 150 
<div class="overflow-x-auto rounded-xl border border-slate-200 dark:border-slate-700">
  <table class="w-full min-w-md text-sm">
    <thead class="bg-slate-50 text-xs text-slate-500 dark:bg-slate-800 dark:text-slate-400">
      <tr>
        <th class="px-4 py-2 text-left font-medium">Заказ</th>
        <th class="px-4 py-2 text-left font-medium">Клиент</th>
        <th class="px-4 py-2 text-left font-medium">Статус</th>
        <th class="px-4 py-2 text-right font-medium">Сумма</th>
      </tr>
    </thead>
    <tbody class="divide-y divide-slate-200 bg-white text-slate-700 dark:divide-slate-700 dark:bg-slate-900 dark:text-slate-300">
      <tr class="hover:bg-slate-50 dark:hover:bg-slate-800">
        <td class="px-4 py-2 font-medium text-slate-900 dark:text-slate-100">№ 1042</td>
        <td class="px-4 py-2">Смирнова А.</td>
        <td class="px-4 py-2"><span class="rounded-full bg-emerald-500/15 px-2 py-0.5 text-xs font-medium text-emerald-700 dark:text-emerald-300">Оплачен</span></td>
        <td class="px-4 py-2 text-right tabular-nums">12 400</td>
      </tr>
      <tr class="hover:bg-slate-50 dark:hover:bg-slate-800">
        <td class="px-4 py-2 font-medium text-slate-900 dark:text-slate-100">№ 1043</td>
        <td class="px-4 py-2">Ковалёв И.</td>
        <td class="px-4 py-2"><span class="rounded-full bg-amber-500/15 px-2 py-0.5 text-xs font-medium text-amber-700 dark:text-amber-300">Ожидает</span></td>
        <td class="px-4 py-2 text-right tabular-nums">8 900</td>
      </tr>
      <tr class="hover:bg-slate-50 dark:hover:bg-slate-800">
        <td class="px-4 py-2 font-medium text-slate-900 dark:text-slate-100">№ 1044</td>
        <td class="px-4 py-2">Титова Е.</td>
        <td class="px-4 py-2"><span class="rounded-full bg-rose-500/15 px-2 py-0.5 text-xs font-medium text-rose-700 dark:text-rose-300">Ошибка оплаты</span></td>
        <td class="px-4 py-2 text-right tabular-nums">3 150</td>
      </tr>
    </tbody>
  </table>
</div>

С липкой шапкой и прокруткой

Прокрутите блок — заголовок таблицы остаётся видимым.

ДатаОперацияСумма
01.07Пополнение+12 000
03.07Списание−3 400
05.07Пополнение+8 200
09.07Списание−1 150
12.07Списание−760
15.07Пополнение+20 000
21.07Списание−4 300
 
<div class="h-48 overflow-auto rounded-xl border border-slate-200 dark:border-slate-700">
  <table class="w-full text-sm">
    <thead class="sticky top-0 bg-slate-50 text-xs text-slate-500 dark:bg-slate-800 dark:text-slate-400">
      <tr><th class="px-4 py-2 text-left font-medium">Дата</th><th class="px-4 py-2 text-left font-medium">Операция</th><th class="px-4 py-2 text-right font-medium">Сумма</th></tr>
    </thead>
    <tbody class="divide-y divide-slate-200 bg-white text-slate-700 dark:divide-slate-700 dark:bg-slate-900 dark:text-slate-300">
      <tr><td class="px-4 py-2">01.07</td><td class="px-4 py-2">Пополнение</td><td class="px-4 py-2 text-right tabular-nums">+12 000</td></tr>
      <tr><td class="px-4 py-2">03.07</td><td class="px-4 py-2">Списание</td><td class="px-4 py-2 text-right tabular-nums">−3 400</td></tr>
      <tr><td class="px-4 py-2">05.07</td><td class="px-4 py-2">Пополнение</td><td class="px-4 py-2 text-right tabular-nums">+8 200</td></tr>
      <tr><td class="px-4 py-2">09.07</td><td class="px-4 py-2">Списание</td><td class="px-4 py-2 text-right tabular-nums">−1 150</td></tr>
      <tr><td class="px-4 py-2">12.07</td><td class="px-4 py-2">Списание</td><td class="px-4 py-2 text-right tabular-nums">−760</td></tr>
      <tr><td class="px-4 py-2">15.07</td><td class="px-4 py-2">Пополнение</td><td class="px-4 py-2 text-right tabular-nums">+20 000</td></tr>
      <tr><td class="px-4 py-2">21.07</td><td class="px-4 py-2">Списание</td><td class="px-4 py-2 text-right tabular-nums">−4 300</td></tr>
    </tbody>
  </table>
</div>

Зебра и выделение строки

Зебра помогает вести взгляд по строке в широких таблицах.

ПозицияКоличество
Кабель HDMI14
Клавиатура3
Монитор 27"1
Мышь8
 
<div class="overflow-x-auto rounded-xl border border-slate-200 dark:border-slate-700">
  <table class="w-full text-sm">
    <thead class="bg-slate-50 text-xs text-slate-500 dark:bg-slate-800 dark:text-slate-400">
      <tr><th class="px-4 py-2 text-left font-medium">Позиция</th><th class="px-4 py-2 text-right font-medium">Количество</th></tr>
    </thead>
    <tbody class="text-slate-700 dark:text-slate-300">
      <tr class="odd:bg-white even:bg-slate-50 dark:odd:bg-slate-900 dark:even:bg-slate-800/50"><td class="px-4 py-2">Кабель HDMI</td><td class="px-4 py-2 text-right tabular-nums">14</td></tr>
      <tr class="odd:bg-white even:bg-slate-50 dark:odd:bg-slate-900 dark:even:bg-slate-800/50"><td class="px-4 py-2">Клавиатура</td><td class="px-4 py-2 text-right tabular-nums">3</td></tr>
      <tr class="bg-amber-50 dark:bg-amber-950/30"><td class="px-4 py-2 font-medium text-slate-900 dark:text-slate-100">Монитор 27"</td><td class="px-4 py-2 text-right tabular-nums font-medium">1</td></tr>
      <tr class="odd:bg-white even:bg-slate-50 dark:odd:bg-slate-900 dark:even:bg-slate-800/50"><td class="px-4 py-2">Мышь</td><td class="px-4 py-2 text-right tabular-nums">8</td></tr>
    </tbody>
  </table>
</div>

Список вместо таблицы на мобильном

Альтернатива прокрутке: на мобильном строки превращаются в карточки.

№ 1042 Оплачен

Смирнова А.

12 400 ₽

№ 1043 Ожидает

Ковалёв И.

8 900 ₽

<div class="space-y-2 sm:hidden">
  <div class="rounded-lg border border-slate-200 p-3 text-sm dark:border-slate-700">
    <div class="flex items-center justify-between">
      <span class="font-medium text-slate-900 dark:text-slate-100">№ 1042</span>
      <span class="rounded-full bg-emerald-500/15 px-2 py-0.5 text-xs font-medium text-emerald-700 dark:text-emerald-300">Оплачен</span>
    </div>
    <p class="mt-1 text-slate-600 dark:text-slate-400">Смирнова А.</p>
    <p class="mt-1 text-right tabular-nums text-slate-900 dark:text-slate-100">12 400 ₽</p>
  </div>
  <div class="rounded-lg border border-slate-200 p-3 text-sm dark:border-slate-700">
    <div class="flex items-center justify-between">
      <span class="font-medium text-slate-900 dark:text-slate-100">№ 1043</span>
      <span class="rounded-full bg-amber-500/15 px-2 py-0.5 text-xs font-medium text-amber-700 dark:text-amber-300">Ожидает</span>
    </div>
    <p class="mt-1 text-slate-600 dark:text-slate-400">Ковалёв И.</p>
    <p class="mt-1 text-right tabular-nums text-slate-900 dark:text-slate-100">8 900 ₽</p>
  </div>
</div>
<p class="hidden text-sm text-slate-600 sm:block dark:text-slate-400">
  На широком экране здесь была бы обычная таблица — сузьте окно, чтобы увидеть карточки.
</p>

Разбор

КлассЗачем
overflow-x-auto у обёрткигоризонтальная прокрутка вместо распирания страницы
divide-y divide-slate-200линии между строками без правил для последней
text-right tabular-numsчисла выровнены по разрядам
sticky top-0 у theadлипкий заголовок при прокрутке
odd:bg-white even:bg-slate-50зебра
hover:bg-slate-50подсветка строки под курсором
text-xs font-medium в шапкезаголовки мельче и спокойнее содержимого

Частые ошибки

  • Таблица без обёртки с прокруткой ломает раскладку на мобильном.
  • Числа выровнены по левому краю — колонки не читаются.
  • Слишком много вертикальных линий: достаточно горизонтальных.
  • Статусы переданы только цветом, без подписи.
  • Заголовки жирнее содержимого и перетягивают внимание.
  • Действия строки без aria-label с указанием, к какой строке относятся.