Ẩn một <tr>, trong khi vẫn liên quan đến nó trong các tính toán chiều rộng

Question

Có kết quả tìm kiếm được lưu trữ trong một bảng như hình dưới đây:

<table> 
    <tbody> 
     <tr> 
      <td>Column One</td> 
      <td>Column Two</td> 
      <td>Column Three</td> 
     </tr> 
    </tbody> 
</table> 

Bảng thực tế chứa dữ liệu nhiều hơn nữa (cả trong các cột và các hàng) và là chiều rộng chất lỏng. Vì dữ liệu là biến, tôi muốn các table-layout giữ nguyên auto, vì nó xử lý tự động hóa (sẽ tốn kém và phức tạp khi thực hiện trong javascript để nói 1.000 hàng).

Bảng này cũng được lọc bởi tiện ích con tìm kiếm trực tiếp ẩn các hàng không khớp với truy vấn bằng cách thêm display: none;. Tuy nhiên, tôi đã thấy rằng điều này thường làm cho độ rộng cột được tính toán lại (thường gây ra một số bước nhảy chói tai trong chiều rộng cột). Điều này có ý nghĩa, cho rằng các hàng có khả năng chỉ bao gồm các phép tính nếu chúng có display: table-row;. Nhưng đây không phải là hành vi của tôi.

Có thể ẩn <tr> từ chế độ xem, nhưng vẫn được bao gồm trong các tính toán chiều rộng cột được thực hiện (ví dụ: kích thước lại) bởi trình duyệt trên bảng có table-layout: auto; không?

Tôi đã thử đặt height: 0; (và max-height: 0;), nhưng đã học được từ other SO questions rằng điều này không làm việc vì display: table-cell;. Tương tự, cài đặt line-height: 0; không thành công, nhưng tôi đã nhận ra rằng vì một vài cột của tôi có chặn nội dung. Tôi cũng đã xem xét việc thiết lập độ rộng trên bảng <td> s, nhưng sau đó điều này làm cho chất lỏng trong bảng (tôi sẽ phải loại bỏ chiều rộng rõ ràng về thay đổi kích thước, có thể gây ra nhảy rộng và sẽ không hoạt động trừ khi tất cả các hàng được hiển thị và được bao gồm trong tính toán kích thước bảng của trình duyệt).

Chỉnh sửa: Để làm rõ, bằng cách ẩn từ chế độ xem, tôi ngụ ý ẩn theo nghĩa là display: none;, chứ không phải visibility: hidden;. Cái sau sẽ hoạt động nếu phần tử không giữ nguyên chiều cao ban đầu của nó khi bị ẩn, nhưng tiếc là đây không phải là trường hợp.

Lưu ý: Tôi biết rằng ngay từ cái nhìn đầu tiên, đây dường như là một câu hỏi khá hẹp, nhưng tôi tin rằng đây có thể là trường hợp sử dụng phổ biến. Như vậy, tôi đã in đậm phần áp dụng nhất (đọc: quan trọng nhất) của câu hỏi. Phần còn lại (hơi cụ thể đối với tôi) là giải thích nhiều hơn bất cứ điều gì khác.

Answer 1

Nếu tôi đã hiểu một cách chính xác bạn đang tìm kiếm visibility: collapse; khai:

17.5.5 Dynamic row and column effects

Thuộc tính visibility mất giá trị collapse cho hàng , hàng nhóm, cột và colu các thành phần nhóm mn. Giá trị này làm cho toàn bộ hàng hoặc cột bị xóa khỏi màn hình và không gian thông thường được đưa lên bởi hàng hoặc cột sẽ được cung cấp cho nội dung khác. Nội dung của các hàng và cột được mở rộng cắt ngang cột hoặc hàng bị sập.Sự đàn áp của hàng hoặc cột, tuy nhiên, không ảnh hưởng đến bố cục của bảng. Điều này cho phép hiệu ứng động để xóa các hàng hoặc cột của bảng mà không cần buộc bố cục lại bảng để tính đến thay đổi tiềm năng trong các ràng buộc cột.

Tuy nhiên có vẻ như đây là lỗi trên một số trình duyệt web. Các MDN states:

Sự hỗ trợ cho visibility:collapse bị thiếu hoặc không chính xác một phần trong một số trình duyệt hiện đại. Trong nhiều trường hợp, nó có thể không được xử lý chính xác như visibility:hidden trên các phần tử khác với các hàng và cột của bảng.

Đáng tiếc là nó có tác dụng như visibility: hidden trên Chrome37: Demo Here.

Nhưng may mắn thay, bạn có thể giả hiệu ứng bằng cách line-height: 0 khai:

Updated Demo

.hidden { 
    visibility: collapse; 
    line-height: 0; /* Set the height of the line box to 0 
        in order to remove the occupied space */ 
} 

Answer 2

sử dụng CSS:

tr { 
    visibility: hidden; 
}