如何隐藏HTML表中的列？

128

您需要为此使用样式表。

<td style="display:none;">

来源

2011-03-26 06:30:12 Anuraj

+1

那么只有第一coloumn使用CSS的HTML – 2015-09-08 19:18:56

+0

我应该如何添加样式，当我使用javascript createelement（TD）表; – 2015-09-08 19:20:16

+1

@ office302仅将此样式应用于第一个td？或者你只想使用CSS - 你可以这样做：'td：first-child {display：none; }' – Anuraj 2015-09-09 06:08:46

1

您还可以做什么VS开发由通过迭代列，并在特定的索引设置TD元素有这种风格分配使用JavaScript编程风格建议。

来源

2011-03-26 06:31:57 tamarintech

21

你也可以使用：

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

是“隐藏”隐藏单元格它们之间的区别，但它拥有的空间，但用“崩溃”的空间并不像举行显示：无。这在隐藏整列或行时非常重要。

来源

2012-11-22 11:52:44

+0

感谢分享这个简单的技巧。 – KristCont 2016-03-08 03:07:49

+0

我发现，对于div标签崩溃也将占据空间。对于div标签，你必须使用display：none;以真正的崩溃而不是占有这个空间。 – 2016-04-03 11:30:46

+3

'visibility：collapse'是专门为处理单元格显示/隐藏而设计的，因为在重新计算单元格宽度/高度与“display：none”之间有差别。见https://developer.mozilla.org/en-US/docs/Web/CSS/visibility#Values – SteveB 2016-09-23 07:18:18

74

可以使用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）。

来源

2012-11-22 12:08:20 Kos

+0

这可能会有破坏性的副作用，请参见[我的答案]（http://stackoverflow.com/a/29500414/616644）为改进的解决方案。 – 2015-04-07 20:12:22

+0

@RickSmith好点。更新我的帖子以避免另一种方式的问题（使用子选择器）。 – Kos 2015-04-07 20:38:33

+0

小孩选择器绝对更好。好答案。 – 2015-04-07 20:42:51

19

科斯的答案几乎是正确的，但可能有破坏性的副作用。这是更正确的：

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

CSS（层叠样式表）将级联属性，所有的孩子。这意味着*:nth-child(1)将隐藏第一个td的每个tr和和隐藏所有td孩子的第一个元素。如果你的td有任何东西像按钮，图标，输入或选择，第一个将被隐藏（woops！）。

即使你不目前有东西会被隐藏，如果你需要添加一个，你的挫折感。不要像这样惩罚你的未来自我，这将是一个痛苦的调试！

我的答案只会隐藏第一个td和th所有tr在#myTable保持您的其他元素安全。在th.You表和.hidecol

来源

2015-04-07 20:11:27

2

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

使用.hideFullColumn不需要在TD添加类单独因为这将是问题，因为指数可能不是每个TD的心态。

来源

2015-05-08 08:32:18

6

自举人使用.hidden类<td>。

来源

2016-01-07 17:26:11 theapache64

3

您也可以使用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>

已知问题：这会不会在谷歌浏览器的工作。请投票的错误在https://bugs.chromium.org/p/chromium/issues/detail?id=174167

来源

2016-12-31 16:16:13

如何隐藏HTML表中的列？

回答

相关问题