Cách tạo bảng zebra stripe (sọc zebra) với CSS

Giới thiệu

Zebra stripe table (bảng sọc zebra) xen kẽ màu nền hàng chẵn/lẻ để dễ theo dõi dòng dữ liệu trên bảng rộng. CSS dùng pseudo-class :nth-child(even) hoặc :nth-child(odd).

Ví dụ hoàn chỉnh - Bảng Zebra Stripe chuyên nghiệp

<!DOCTYPE html>
<html lang="vi">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Zebra Stripe Table</title>
  <style>
    * { box-sizing: border-box; }
    body { font-family: 'Segoe UI', system-ui, sans-serif; padding: 40px 20px; background: #f5f5f5; }
    .table-wrapper { max-width: 800px; margin: 0 auto; background: #fff; border-radius: 12px; box-shadow: 0 4px 20px rgba(0,0,0,0.08); overflow: hidden; }
    table { width: 100%; border-collapse: collapse; font-size: 15px; }
    th, td { padding: 16px 20px; text-align: left; border-bottom: 1px solid #eee; }
    th { background: #1a1a2e; color: #fff; font-weight: 600; text-transform: uppercase; font-size: 13px; letter-spacing: 0.5px; }
    /* Zebra striping */
    tbody tr:nth-child(even) { background: #f8f9fa; }
    tbody tr:nth-child(odd) { background: #fff; }
    /* Hover highlight */
    tbody tr:hover { background: #eef2ff !important; }
    /* Responsive: horizontal scroll on mobile */
    @media (max-width: 600px) {
      .table-wrapper { border-radius: 0; box-shadow: none; }
      table { display: block; overflow-x: auto; white-space: nowrap; }
    }
  </style>
</head>
<body>
  <div class="table-wrapper">
    <table>
      <thead>
        <tr>
          <th>Họ và tên</th>
          <th>Email</th>
          <th>Vai trò</th>
          <th>Trạng thái</th>
          <th>Ngày tạo</th>
        </tr>
      </thead>
      <tbody>
        <tr><td>Nguyễn Văn An</td><td>an.nguyen@email.com</td><td>Admin</td><td><span style="background:#e8f5e9;color:#2e7d32;padding:4px 10px;border-radius:20px;font-size:12px">Hoạt động</span></td><td>15/01/2024</td></tr>
        <tr><td>Trần Thị Bình</td><td>binh.tran@email.com</td><td>Editor</td><td><span style="background:#fff3e0;color:#e65100;padding:4px 10px;border-radius:20px;font-size:12px">Chờ duyệt</span></td><td>20/01/2024</td></tr>
        <tr><td>Lê Văn Cường</td><td>cuong.le@email.com</td><td>Viewer</td><td><span style="background:#e8f5e9;color:#2e7d32;padding:4px 10px;border-radius:20px;font-size:12px">Hoạt động</span></td><td>10/02/2024</td></tr>
        <tr><td>Phạm Thị Dung</td><td>dung.pham@email.com</td><td>Admin</td><td><span style="background:#fdeaea;color:#c62828;padding:4px 10px;border-radius:20px;font-size:12px">Khóa</span></td><td>05/03/2024</td></tr>
        <tr><td>Hoàng Văn Em</td><td>em.hoang@email.com</td><td>Editor</td><td><span style="background:#e8f5e9;color:#2e7d32;padding:4px 10px;border-radius:20px;font-size:12px">Hoạt động</span></td><td>12/03/2024</td></tr>
      </tbody>
    </table>
  </div>
</body>
</html>

Các kỹ thuật Zebra Stripe

1. CSS thuần (Khuyên dùng)

tbody tr:nth-child(even) { background: #f2f2f2; }
tbody tr:nth-child(odd)  { background: #fff; }

• Tự động cập nhật khi thêm/xóa dòng (JS không cần can thiệp).
• Hiệu suất tốt, không thêm class vào HTML.

2. Class thủ công (Legacy IE8-)

<tr class="even">...</tr>
<tr class="odd">...</tr>
.even { background: #f2f2f2; }
.odd { background: #fff; }

Cần JS gán class khi render/dynamic.

Nâng cao: Stripe cho Column (Dọc)

table { border-collapse: separate; border-spacing: 0; }
col:nth-child(even) { background: #f8f9fa; }
/* Hoặc dùng :nth-child trên td/th */
td:nth-child(even), th:nth-child(even) { background: #f8f9fa; }

Accessibility & UX

• Contrast: Màu sọc phải đủ contrast với chữ (WCAG AA: 4.5:1).
• Hover row: Highlight cả hàng khi hover (giúp theo dõi cột).
• Focus cell: td:focus-within { outline: 2px solid #667eea; } cho keyboard navigation.
• Responsive: Mobile dùng overflow-x: auto trên wrapper, không stack cell (giữ cấu trúc bảng).
• Scope: <th scope="col"> / scope="row" cho screen reader.

Màu gợi ý cho Zebra