是否可以通过仅更改col元素上的CSS类来隐藏/显示表列?

发布时间:2019-05-15 发布网站:脚本之家
脚本之家收集整理的这篇文章主要介绍了是否可以通过仅更改col元素上的CSS类来隐藏/显示表列?脚本之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我试图在运行时根据用户选择隐藏/显示表中的列.我定义了两个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)等等根据需要选择/避免.

总结

以上是脚本之家为你收集整理的是否可以通过仅更改col元素上的CSS类来隐藏/显示表列?全部内容,希望文章能够帮你解决是否可以通过仅更改col元素上的CSS类来隐藏/显示表列?所遇到的程序开发问题。

如果觉得脚本之家网站内容还不错,欢迎将脚本之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:76874919,请注明来意。
标签: