Dùng css để cố định cột hoặc hàng khi cuộn đơn giản nhất

Chúng tôi đã đề cập đến các ô <table> riêng lẻ, <th> và <td> có thể ở vị trí: cố định. Khá dễ dàng để làm cho tiêu đề của bảng dính vào đầu màn hình trong khi cuộn qua một nhóm hoặc hàng (như bản demo này). Nhưng độ dính không chỉ dành cho phần trên cùng của màn hình, bạn có thể dán mọi thứ theo bất kỳ hướng cuộn nào (ngang cũng thú vị không kém). Trên thực tế, chúng ta có thể có nhiều phần tử dính bị kẹt theo các hướng khác nhau bên trong cùng một phần tử và thậm chí cả các phần tử đơn lẻ bị kẹt theo nhiều hướng. Dưới đây là ví dụ video về một bảng có cả tiêu đề và cột đầu tiên:

Tại sao bạn lại làm vậy? Cụ thể đối với dữ liệu dạng bảng trong đó việc tham chiếu chéo là quan trọng. Trong bảng này (tất nhiên là thể hiện trò chơi bóng chày tính điểm trong đó bằng cách nào đó có 20 đội chơi với nhau cùng một lúc vì đó là cách hoạt động của môn bóng chày), sẽ “có lý” nếu bạn không muốn tên đội hoặc số hiệp đấu. để cuộn đi vì bạn sẽ mất bối cảnh của những gì bạn đang xem.

“Thủ thuật” ở đây một phần nằm ở vị trí: dính; cách sử dụng, nhưng đối với tôi, bạn phải xử lý các phần tử chồng chéo như thế nào. Một ô bảng dính cần phải có nền, vì nếu không chúng ta sẽ thấy nội dung chồng chéo. Nó cũng cần xử lý chỉ số z thích hợp để khi nó vào đúng vị trí, nó sẽ ở trên cùng những gì nó được cho là ở trên. Đây có vẻ là phần khó nhất:

  • Đảm bảo các ô tbody>th thân nằm trên các ô của bảng thông thường để chúng luôn ở trên cùng khi cuộn ngang.
  • Hãy đảm bảo rằng các thead>th ở trên cùng khi cuộn dọc.
  • Đảm bảo ô thead>th:first-child là cao nhất vì nó cần phải ở phía trên các ô nội dung và lại là tiêu đề của cuộn ngang.

Một vài ví dụ, nhưng nó có thể thực hiện được như nhau bên dưới.

Table giữ đầu trang, chân trang và cột đầu tiên cố định chiều cao và chiều rộng linh hoạt bằng cách sử dụng:

position: sticky

Ví dụ này sử dụng vị trí: dính trên các phần tử thứ trong cột thead, tfoot và left để đạt được hiệu ứng cố định. Các trình duyệt không hỗ trợ vị trí: dính sẽ chỉ nhận được một bảng bình thường nên không gây hại gì. Thay đổi kích thước trình duyệt nhỏ hơn để xem cột đầu tiên cố định.

Xem và chỉnh sửa trên Codepen

Đã đăng trong Code Snippets, CSS.