Có thể ẩn/hiển thị các cột trong bảng bằng cách thay đổi lớp CSS trên phần tử col không?

Question

Tôi đang cố gắng ẩn/hiển thị các cột trong bảng dựa trên lựa chọn của người dùng trong thời gian chạy. Tôi định nghĩa hai lớp CSS:

.hide { visibility: collapse; } 

.show { visibility: visible; } 

Tôi cố gắng để thiết lập các phong cách trên các yếu tố <col> tương ứng với cột Tôi muốn ẩn/hiển thị:

<table> 
    <thead> 
    <tr> 
     <th>Column 1</th> 
     <th>Column 2</th> 
     ... 
    </tr> 
    </thead> 
    <colgroup> 
    <col class="hide"> 
    <col> 
    ... 
    </colgroup> 
    <tbody> 
    <tr> 
     <td>Row 1 Column 1</td> 
     <td>Row 1 Column 2</td> 
    </tr> 
    ... 
    </tbody> 
</table> 

Tuy nhiên, nó chỉ có vẻ làm việc trong Firefox nhưng không phải trong Safari hoặc Chrome. Safari và Chrome có cần xử lý đặc biệt không? Tôi cố gắng tránh lặp qua tất cả các hàng và sửa đổi lớp/kiểu CSS trên mỗi <td> tương ứng và số cột trong bảng lớn, vì vậy tôi cũng muốn tránh tạo một lớp CSS cho mỗi cột. Có cách nào đáng tin cậy để ẩn/hiển thị các cột trên các trình duyệt chỉ bằng cách thay đổi lớp CSS trên <col>?

Answer 1

Vâng Chrome không thực sự là một trình duyệt được hỗ trợ rộng rãi nên về mặt kỹ thuật, không ai quan tâm nếu nó không hoạt động trong Chrome (chưa được nêu ra). Nhưng tại sao không đặt khả năng hiển thị ẩn?

td { 
    width:100px; 
    height:500px; 
    border:solid 1px #000000; 
} 
td#one { 
     visibility:hidden; 
    background:#ff0000; 
} 
td#two { 
    visibility:hidden; 
    background:#00ff00; 
} 
td#three { 
     visibility:hidden; 
    background:#0000ff; 
} 

Answer 2

Trình duyệt dựa trên webkit dường như không hỗ trợ col {visibility: collapse}. http://www.quirksmode.org/css/columns.html là khá hữu ích để kiểm tra hỗ trợ cột bảng.

tôi đang chơi với:

/* Skipping 1st column: labels */ 
table.hidecol2 th:nth-child(2), 
table.hidecol2 td:nth-child(2), 
table.hidecol3 th:nth-child(3), 
table.hidecol3 td:nth-child(3) { 
    display: none; 
} 

nhưng sau đó tôi có thể đủ khả năng để không quan tâm đến trình duyệt IE. Chỉ cần cẩn thận rằng bạn sẽ phải tinh chỉnh cho bất kỳ colspans và rowspans. Sử dụng tr: con đầu tiên, tr: không (: con đầu tiên), v.v. để chọn/tránh khi cần.

Answer 3

Tôi nghĩ rằng sự lựa chọn tốt hơn là sử dụng colgroup trên bàn của bạn và sửa đổi các thuộc tính css để hiển thị hoặc ẩn một cột hoặc một tập hợp các cột. Ví dụ, bạn sẽ ẩn các năm cột đầu tiên như dưới đây:

<table> 
     <colgroup> 
      <col id="filterTableColgroup" span="5"> 
     </colgroup> 
     <thead> 
     <tr> 
      <th>...</th> 
     </tr> ... 

Và bạn sẽ sửa đổi các thuộc tính bằng JQuery như dưới đây:

$("#filterTableColgroup").css('visibility', 'collapse');