如何隐藏 HTML 表格中的列？答案

【问题标题】：How to hide columns in HTML table?如何隐藏 HTML 表格中的列？
【发布时间】：2011-07-23 09:02:39
【问题描述】：

我在 ASPX 中创建了一个表。我想根据要求隐藏其中一列，但在 HTML 表格构建中没有像 visible 这样的属性。我该如何解决我的问题？

【问题讨论】：

【解决方案1】：

为此，您需要使用样式表。

<td style="display:none;">

【讨论】：

仅使用 html 的 css 的第一列怎么样
当我使用 javascript createelement(td) 制作表格时，我应该如何为其添加样式；
@office302 仅将此样式应用于第一个 td？或者你只想使用 CSS - 你可以这样做td:first-child { display:none; }
@Anuraj 应该注意的是：支持first-child等> IE 11和Edge，无论如何都不错

【解决方案2】：

您可以使用nth-child CSS 选择器隐藏一整列：

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

这是在假设第 N 列的单元格（th 或 td）始终是其行的第 N 个子元素的情况下工作的。

Here's a demo.

如果您希望列号是动态的，您可以使用querySelectorAll 或任何提供类似功能的框架来做到这一点，例如此处的jQuery：

$('#myTable tr > *:nth-child(2)').hide();

Demo with jQuery

（jQuery 解决方案也适用于legacy browsers that don't support nth-child）。

【讨论】：

这可能会产生破坏性的副作用，请参阅my answer below 以获得改进的解决方案。
@RickSmith 好点。更新了我的帖子以避免以另一种方式出现问题（使用子选择器）。
子选择器肯定更好。很好的答案。
不错的解决方案，但需要更多考虑 colspan 案例。

【解决方案3】：

你也可以使用：

<td style="visibility:hidden;">
or
<td style="visibility:collapse;">

它们之间的区别是“隐藏”隐藏了单元格，但它保留了空间，但“折叠”空间不像 display:none 那样保留。这在隐藏整列或整行时非常重要。

【讨论】：

我发现对于 div 标签 collapse 也会保留空间。对于 div 标签，您必须使用 display: none;为了真正的崩溃而不是占据空间。
visibility: collapse 是专门为处理单元格显示/隐藏而设计的，因为在重新计算单元格宽度/高度时这与 display:none 之间存在差异。见developer.mozilla.org/en-US/docs/Web/CSS/visibility#Values

【解决方案4】：

Kos 的回答几乎是正确的，但可能会产生破坏性的副作用。这更正确：

#myTable tr td:nth-child(1), #myTable th:nth-child(1) {
    display: none;
}

CSS（级联样式表）将级联属性赋予其所有子级。这意味着*:nth-child(1) 将隐藏每个tr 的第一个td AND 隐藏所有td 子元素的第一个元素。如果您的任何td 有按钮、图标、输入或选择之类的东西，第一个将被隐藏（哇！）。

即使您目前没有要隐藏的东西，如果您需要添加一个，请想象一下您在路上的挫败感。不要那样惩罚未来的自己，调试起来会很痛苦！

我的回答只会隐藏#myTable 中所有tr 上的第一个td 和th，以确保您的其他元素安全。

【讨论】：

【解决方案5】：

引导人员在<td> 上使用.hidden 类。

【讨论】：

【解决方案6】：

您还可以使用 col 元素 https://developer.mozilla.org/en/docs/Web/HTML/Element/col 隐藏列

隐藏表格中的第二列：

<table>
  <col />
  <col style="visibility:collapse"/>
  <tr><td>visible</td><td>hidden</td></tr>
  <tr><td>visible</td><td>hidden</td></tr>

已知问题：这在 Google Chrome 中不起作用。请在https://bugs.chromium.org/p/chromium/issues/detail?id=174167为该错误投票

【讨论】：

【解决方案7】：

<style>
.hideFullColumn tr > .hidecol
{
    display:none;
}
</style>

在表中使用 .hideFullColumn，在 th 中使用 .hidecol。您不需要在 td 中单独添加类，因为这将是一个问题，因为每个 td 可能不会考虑索引。

【讨论】：

【解决方案8】：

您还可以通过使用 Javascript 通过迭代列并将 td 元素设置在特定索引处以具有该样式来以编程方式执行 vs dev 建议的操作。

【讨论】：

【解决方案9】：

<!doctype html>
<html lang="en">
<head>
<style id="myStyleSheet">
...
</style>

var column = 3;
var styleSheet = document.getElementById("myStyleSheet").sheet;
var rule = "table  tr td:nth-child("+ column +"),table th:nth-child("+ column +") 
{display: none}";
styleSheet.insertRule(rule);

【讨论】：

希望它能解决问题，但请添加对代码的解释，以便用户完全理解他/她真正想要的。

【解决方案10】：

这是另一种动态隐藏列的解决方案

为要隐藏的列的 th 和 td 定义类

<table>
   <tr>
     <th> Column 1 </th>
     <th class="dynamic-hidden-col"> Column 2 </th>
     <th Column 3 </th>
  </tr>
  <tr>
     <td> Value 1 </td>
     <td class="dynamic-hidden-col"> Value 2 </td>
     <td> Value 3 </td>
  </tr>
     <td> row 2 Value 1 </td>
     <td class="dynamic-hidden-col"> row 2 Value 2 </td>
     <td> row 2 Value 3 </td>
  <tr>
</table>

这里是隐藏列的 Jquery 脚本。

$('#hide-col').click(function () {      
    $(".dynmic-hidden-col").hide();
});

这样可以动态隐藏表格列。

【讨论】：