我试图在运行时根据用户选择隐藏/显示表中的列.我定义了两个CSS类：
.hide { visibility: collapse; }
.show { visibility: visible; }
我试图在< col>上设置这些样式对应于我要隐藏/显示的列的元素：
<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>
但是,它似乎只适用于Firefox,但不适用于Safari或Chrome. Safari和Chrome是否需要特殊处理？我试图避免遍历所有行并修改每个对应的< td>上的CSS类/样式,并且表中的列数很大,所以我想避免每列创建一个CSS类.是否有任何可靠的方法可以通过更改< col>上的CSS类来跨浏览器隐藏/显示列
解决方法
基于Webkit的浏览器似乎还不支持col {visibility：collapse}.
http://www.quirksmode.org/css/columns.html对于检查表列支持非常有用.
我正在玩：
/* 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;
}
但后来我可以不关心IE.请注意,你必须调整任何colspans和rowpans.使用tr：first-child,tr：not(：first-child)等等根据需要选择/避免.
