Question

我正在尝试在运行时根据用户选择隐藏/显示表中的列。我定义了两个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类？

Answer 1

基于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）等等来根据需要选择/避免。

Answer 2

我认为更好的选择是在表上使用colgroup并修改css属性以显示或隐藏列或一组列。例如，您将隐藏前五列，如下所示：

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

你可以通过JQuery修改属性，如下所示：

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

Answer 3

Chrome确实不是广泛支持的浏览器，所以从技术上讲，没有人关心它是否在Chrome中无效（至少还没有）。但为什么不设置隐藏的可见性？

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;
 }

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

3 个答案: