Hãy cố định tiêu đề bảng

Hãy cố định tiêu đề bảng

• Trên web, chúng ta thường gặp các tập dữ liệu lớn hoặc bố cục dạng bảng.
• Vấn đề xuất hiện khi bắt đầu cuộn trong một bảng có hàng trăm hàng.
• Khi phần đầu bảng biến mất, người dùng sẽ khó nhớ mỗi cột tương ứng với nội dung gì.

Header cố định

• Header cố định trông như phép màu, nhưng triển khai lại rất dễ.
• Chỉ cần thêm đúng hai thuộc tính CSS vào thead:
  • position: sticky;
  • top: 0;
• Với sticky có mức hỗ trợ khoảng 96% trên toàn cầu, tính năng này được nhiều trình duyệt hỗ trợ ổn định.
• Nó cũng giúp cải thiện trải nghiệm người dùng.

Ý kiến của GN⁺

• Khi xử lý các bảng lớn trên website, việc giúp người dùng dễ dàng nhìn thấy tiêu đề bảng ngay cả khi cuộn xuống sẽ cải thiện đáng kể trải nghiệm người dùng.
• Thông tin rằng có thể dễ dàng cố định header của bảng bằng thuộc tính CSS position: sticky; là điều hữu ích với các nhà phát triển web.
• Vì tính năng này được hỗ trợ rộng rãi, các nhà phát triển web có thể biết rằng họ có thể triển khai nó một cách ổn định trên nhiều trình duyệt khác nhau.

[GN⁺]

Ý kiến trên Hacker News

• Có thể làm header cố định theo một trục, nhưng vẫn đang chờ ngày CSS hỗ trợ theo cả hai trục: liên kết issue trên GitHub
• Dù gần như không có kiến thức về CSS, tôi vẫn đã xây dựng được các web app hoạt động tốt. Gần đây tôi thử làm header cố định cho một bảng có hơn 20.000 hàng, nhưng dù thử các gợi ý từ class Bootstrap, Stack Overflow, GPT và CodePen thì vẫn xuất hiện các tác dụng phụ kỳ lạ. Tuy nhiên, dùng CodePen trong bài viết này thì tôi giải quyết được trong 2 phút và đưa vào production. Xin cảm ơn.
• Việc cố định header bảng bằng position: sticky; tưởng như sẽ dễ, nhưng chỉ cần thao tác gì đó với nội dung bảng là sẽ phát sinh vấn đề. Ví dụ, tôi đã thêm tính năng khôi phục vị trí cuộn khi người dùng cuộn bảng, rời khỏi trang rồi quay lại, nhưng vị trí được khôi phục luôn bị lệch xuống một hàng. Khi nhìn qua header bảng trong suốt thì hàng mong muốn nằm ở trên cùng, nhưng vì header chồng lên nên hàng tiếp theo mới là hàng đầu tiên nhìn thấy. Nếu điều chỉnh vị trí cuộn có tính đến chiều cao header thì lúc đầu hoạt động tốt, nhưng đôi khi vẫn lệch vài pixel. Nguyên nhân là vì bảng rất lớn nên tôi dùng lazy loading theo sự kiện cuộn, đồng thời dùng automatic table layout nên đôi khi ô header bị quá hẹp, từ bị xuống dòng và làm tăng toàn bộ chiều cao header. Cách giải quyết cuối cùng là tạo một ResizeObserver trên phần tử header để điều chỉnh động vị trí cuộn mỗi khi chiều cao thay đổi. Tài liệu ResizeObserver
• Nếu bạn cũng muốn cố định cả đường viền của header bảng, có thể dùng đoạn CSS sau:

  table thead:before {
    content: '';
    position: absolute;
    width: 100%;
    top: 0;
    border-top: 2px solid;
  }
  
  table thead:after {
    content: '';
    position: absolute;
    width: 100%;
    bottom: 0;
    border-bottom: 1px solid;
  }
  

• Sẽ thật tốt nếu header bảng tự động được cố định. Nếu các lập trình viên đã bỏ thêm công sức dùng thẻ <th>, thì nhiều khả năng đó chính là hành vi họ mong muốn.
• Trên dòng lệnh, tốt hơn nên gửi header ra standard error (stderr) và phần nội dung ra standard output (stdout). Nếu không, khi sắp xếp thì header có thể bị trộn vào kết quả.
• Trước đây Chrome từng không cho dùng thuộc tính position: sticky trên các phần tử <thead> và <tr>: liên kết issue Chromium
• Có ý kiến đề xuất thay vì dùng header cố định thì hãy dùng chiều cao viewport bị giới hạn để header luôn hiển thị. Ví dụ DataGridXL làm như vậy: liên kết DataGridXL (người viết nói rõ đây là sản phẩm họ tạo ra)
• Trong ví dụ CodePen, nếu đặt top có tính đến đường viền (ví dụ 0 thay vì -1px), bạn có thể ngăn phần thân bảng tràn lên trên header. Có so sánh hai ví dụ CodePen: CodePen gốc và CodePen đã cải thiện
• Một số người chỉ muốn nói rằng: "xin đừng làm vậy": liên kết thảo luận Hacker News