Đánh dấu một ô của bảng trong HTML

Đánh dấu các hàng của bảng khá dễ dàng trong CSS. tr:hover { background: yellow; } làm tốt ở đó. Nhưng đánh dấu các cột luôn phức tạp hơn một chút, bởi vì không có một phần tử HTML nào là cha của các ô bảng trong một cột. Một chút JavaScript có thể xử lý dễ dàng, nhưng Andrew Howe gần đây đã gửi email cho tôi để chia sẻ một thủ thuật nhỏ mà anh ấy tìm thấy trên StackOverflow, được đăng bởi Matt Walton

Nó đã được vài năm tuổi, vì vậy tôi nghĩ rằng tôi chỉ cần làm sạch nó và đăng nó ở đây

The trick is using huge pseudo elements on the s, hidden by the table overflow

Bạn không thực sự biết bảng lớn như thế nào từ CSS, vì vậy chỉ cần làm cho các phần tử giả siêu cao với giá trị trên cùng âm bằng một nửa số đó

table {
  overflow: hidden;
}

tr:hover {
  background-color: #ffa;
}

td, th {
  position: relative;
}
td:hover::after,
th:hover::after {
  content: "";
  position: absolute;
  background-color: #ffa;
  left: 0;
  top: -5000px;
  height: 10000px;
  width: 100%;
  z-index: -1;
}

Phủ định z-index giữ nó bên dưới nội dung. Phủ định z-index là một thủ thuật thú vị, nhưng hãy lưu ý rằng bảng này không thể được lồng trong các phần tử khác có nền, nếu không phần tô sáng sẽ nằm bên dưới chúng

Bạn có thể thấy rằng trong hành động ở đây

Xem phần Đánh dấu hàng và cột bằng bút chỉ bằng CSS của Chris Coyier (@chriscoyier) trên CodePen

Làm cho nó hoạt động với cảm ứng

Các lớp giả di chuột chỉ hoạt động trên các thiết bị cảm ứng. Đầu tiên, phần tử cần phải được đặt tiêu điểm, theo mặc định, các ô của bảng không được đặt. Bạn chắc chắn có thể thêm trình xử lý sự kiện nhấp chuột vào các ô của bảng và chỉ cần thực hiện mọi thứ bằng JavaScript, nhưng đây là một phương pháp để giữ hầu hết công việc trong CSS

// Whatever kind of mobile test you wanna do.
if (screen.width < 500) {
  
  // :hover will trigger also once the cells are focusable
  // you can use this class to separate things
  $("body").addClass("nohover");

  // Make all the cells focusable
  $("td, th")
    .attr("tabindex", "1")
    // When they are tapped, focus them
    .on("touchstart", function() {
      $(this).focus();
    });
  
}

Sau đó, trong CSS bạn thêm. tập trung phong cách là tốt

td:focus::after,
th:focus::after { 
  content: '';  
  background-color: lightblue;
  position: absolute;  
  left: 0;
  height: 10000px;
  top: -5000px;
  width: 100%;
  z-index: -1;
}

td:focus::before {
  background-color: lightblue;
  content: '';  
  height: 100%;
  top: 0;
  left: -5000px;
  position: absolute;  
  width: 10000px;
  z-index: -1;
}

Trong bản trình diễn cuối cùng của mình, tôi đã hiểu rõ hơn một chút với bộ chọn CSS để đảm bảo rằng các ô trống của bảng không kích hoạt bất kỳ thứ gì, tiêu đề bảng trong các cột chỉ được chọn của