是否可以仅通过更改col元素上的CSS类来隐藏/显示表列? [英] Is it possible to hide / show table columns by changing the CSS class on the col element only?

问题描述

我试图根据用户在运行时的选择隐藏/显示表中的列.我定义了两个CSS类:

I'm trying to hide / show columns in a table based on users choices during runtime. I defined two CSS classes:

.hide { visibility: collapse; }

.show { visibility: visible; }

我尝试在与要隐藏/显示的列相对应的<col>元素上设置这些样式:

I tried to set these styles on the <col> element corresponding to the column I want to hide / show:

<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类，是否有任何可靠的方法可以在浏览器中隐藏/显示列?

However, it only seems to work in Firefox but not in Safari or Chrome. Does Safari and Chrome require special handling? I try to avoid looping through all the rows and modifying the CSS class / style on each corresponding <td>, and the number of columns in the table is large, so I would like to avoid creating one CSS class per column as well. Is there any reliable way to hide / show columns across browsers just by changing the CSS class on <col>?

推荐答案

基于Webkit的浏览器似乎还不支持col {可见性:崩溃}. http://www.quirksmode.org/css/columns.html 对于检查表列支持.

Webkit based browsers don't seem to support col { visibility: collapse } yet. http://www.quirksmode.org/css/columns.html is quite useful for checking on table column support.

我目前正在玩:

/* 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)等来选择/避免.

but then I can afford to not care about IE. Just beware that you're gonna have to tweak for any colspans and rowspans. Use tr:first-child, tr:not(:first-child) etc. etc. to select / avoid as needed.

这篇关于是否可以仅通过更改col元素上的CSS类来隐藏/显示表列?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！