通过代码隐藏表格列答案

【问题标题】：Hide table column via code通过代码隐藏表格列
【发布时间】：2013-07-21 11:11:27
【问题描述】：

我知道有很多关于隐藏列的帖子，但我会添加另一个问题。下面是一个来自 php 生成的 html 的 sn-p：

<table id="dataGrid">
<col style="display:none">
<col style="display:table-column">
<col style="display:table-column">
<col style="display:table-column">
<col style="display:table-column">
<col style="display:table-column">
<col style="display:table-column">
<col style="display:table-column">
<thead><tr>
...

这根本不起作用。有没有一种有效的方法来通过 html/css 隐藏列，而不使用无数的 td？ w3.org 暗示有，但我尝试了可见性、隐藏、折叠表格单元格等 - 没有结果。

我不想在巨大的表中为每个设置一个类，所以 jquery 是不可能的。

【问题讨论】：

向我们展示您的 CSS 以及您尝试过的内容
请参阅w3schools.com/TAGS/tag_col.asp display 不是受支持的属性。
@DevZer0 - 嗯嗯。 w3fools 提到 <col> 标签支持 align、char、charoff、span、valign 和 width 属性。然而对于它会响应哪些style属性没有什么可说的。也许您将<col style="display 误读为<col display？

标签： php html css html-table

【解决方案1】：

在 CSS 中尝试这样的事情：

#myTable tr *:nth-child(2), {
    display: none;
}

在这种情况下，2 是您要隐藏的列的索引。

我从这个问题的第二个答案中得到了这个：How to hide columns in HTML table?

【讨论】：

这不是解决办法。一个表可能有未知数量的字段，以及要隐藏的未知字段。我只想隐藏具有一些不可编辑属性的字段，例如 auto_increment 之一。由于我花了很多时间寻找隐藏整个 col 的方法并且没有得到任何结果，所以我简单地将 disable prop 放在相应的输入标签上。
索引 2 是指要隐藏的列号。因此，如果您有 5 列，上述 CSS 规则将隐藏整个第 3 列（0、1、2）。
谢谢。但是我能用 20 列和“隐藏”数字 0、4、5、18 做什么？下一张表打开，有 5 个 cols 和 col #0 #2 想要隐藏。所以我最终得到了规范的解决方案：检查字段标志并在 while 循环中为 each 对应的 th-td 设置类 hide{display:none}。效果很好。在这里，我只想听到这样的话：隐藏整个 col 现在根本不可能。

【解决方案2】：

我会这样做。这将隐藏“第二标题”列或中间列。您还可以将style="display:none" 替换为style="<?php echo $nodisplay;?>" 这样的变量，然后您可以根据您的数据关闭或打开列。例如 $nodisplay 可以等于 display:none;取决于您是否希望显示该列。

<table id="dataGrid">
<thead>
    <tr>
        <th>First Title</th>
        <th style="display:none">Second Title</th>
        <th>Third Title</th>
    </tr>
</thead>
<tbody>
    <tr>
        <th>First Body</th>
        <th style="display:none">Second Body</th>
        <th>Third Body</th>
    <tr>
</tbody>
<table>

【讨论】：