如何隐藏HTML表中的列？

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

Answer 1

您需要使用样式表来达到这个目的。

 <td style="display:none;"> 

Answer 2

您可以使用nth-child CSSselect器来隐藏整个列：

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

这是在假定列N（不pipe它是一个th还是td ）的单元总是其行的第N个子元素的情况下工作的。

这是一个演示。

---

如果你想要列号是dynamic的，你可以使用querySelectorAll或者任何提供类似function的框架，比如jQuery ：

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

演示与jQuery

（jQuery解决scheme也适用于不支持nth-child传统浏览器 ）。

Answer 3

你也可以使用：

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

他们之间的差异，“隐藏”隐藏细胞，但它占有的空间，但与“崩溃”的空间不举行像显示：无。 隐藏整列或行时，这是很重要的。

Answer 4

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

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

CSS（层叠样式表）将把属性级联到它的所有子级。 这意味着*:nth-child(1)将会隐藏每个tr的第一个td 并隐藏所有td的第一个元素。 如果你有任何td有button，图标，input或select的东西，第一个将被隐藏（woops！）。

即使你目前没有隐藏的东西，如果你需要添加一个，也可以将你的挫折形象化。 不要这样惩罚你未来的自我，这将是一个痛苦debugging！

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

Answer 5

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

Answer 6

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

Answer 7

您还可以使用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投票选出错误;

Answer 8

你也可以通过迭代遍历列和在特定索引处设置td元素来获得该样式，从而以编程方式完成vs devbuild议的操作。