如何隐藏HTML表中的列？

93

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

html asp.net html-table

— 用户名
source

169

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

<td style="display:none;">

— 阿努拉吉
source

1

仅使用HTML的CSS的第一个对话呢

— office 302

使用javascript createelement（td）制作表格时，应该如何向其中添加样式；

— 办公室302

1

@ office302将此样式仅应用于第一个td吗？或者，您只想使用td:first-child { display:none; }

— CSS-

@Anuraj应该注意的是：支持第一个孩子等> IE 11和Edge，无论如何都很好

— Vitaliy Terziev

87

您可以使用nth-childCSS选择器隐藏整个列：

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

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

这是一个演示。

如果希望列号是动态的，则可以使用querySelectorAll或任何具有类似功能的框架来实现，例如jQuery：

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

jQuery演示

（jQuery解决方案还可以在不支持的旧版浏览器上使用nth-child）。

— 科斯
source

1

这可能会产生有害的副作用，请参阅下面的答案以获取改进的解决方案。

— 里克·史密斯

@RickSmith好点。更新了我的帖子，以另一种方式避免该问题（使用子选择器）。

— 2015年

子选择器绝对更好。好答案。

— 里克·史密斯

不错的解决方案，但在colspan案例上需要更多考虑。

— Cinoss

30

您还可以使用：

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

它们之间的区别是“隐藏”隐藏了单元格，但保留了空格，但使用“折叠”，则不像display：none那样保留空格。隐藏整个列或行时，这一点很重要。

— 道夫·米勒
source

1

我发现，对于div标签，折叠也会保留空间。对于div标签，您必须使用display：none; 为了真正崩溃而不占据空间。

— Dov Miller

5

visibility: collapse是专门为处理单元格显示/隐藏而设计的，因为在重新计算单元格宽度/高度之间存在一个差异display:none。请参阅developer.mozilla.org/zh-CN/docs/Web/CSS/visibility#Values

— SteveB 2013年

28

科斯的答案几乎是正确的，但可能会带来有害的副作用。这是更正确的：

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

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

即使您当前没有隐藏的事物，也可以在需要添加失败时将挫败感想象出来。不要那样惩罚你未来的自我，这将是一个调试的痛苦！

我的回答只会隐藏在第一td和th所有tr在#myTable保持你的其他元素的安全。

— 里克·史密斯
source

10

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

— theapache64
source

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为该错误投票

— 恐慌上校
source

2

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

展开摘要

在表中使用.hideFullColumn并在th中使用.hidecol。您不需要在td中单独添加类，因为会出现问题，因为可能不必考虑每个td的索引。

— 苏维克移民
source

1

您还可以通过迭代列并在特定索引处将td元素设置为具有该样式的方式，通过Java赋值样式，从而以vs编程的方式进行编程。

— 罗望子
source

0

<!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);

— 阿尔伯特
source

2

希望它将解决问题，但请在其中添加代码说明，以便用户完全理解他/她真正想要的。

— Jaimil Patel