如何隐藏 HTML 表格中的列？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5440657/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to hide columns in HTML table?
提问by user601367
I have created a table in ASPX. I want to hide one of the columns based on the requirement but there is no attribute like visiblein the HTML table building. How can I solve my problem?
我在 ASPX 中创建了一个表。我想根据要求隐藏其中一列，但没有像visibleHTML 表格构建中那样的属性。我该如何解决我的问题？
回答by Anuraj
You need to use Style Sheet for this purpose.
为此，您需要使用样式表。
<td style="display:none;">
回答by Kos
You can use the nth-childCSS selector to hide a whole column:
您可以使用nth-childCSS 选择器隐藏整列：
#myTable tr > *:nth-child(2) {
display: none;
}
This works under assumption that a cell of column N (be it a thor td) is always the Nth child element of its row.
这是在假设第 N 列的单元格（无论是 ath还是td）始终是其行的第 N 个子元素的情况下工作的。
?
If you want the column number to be dynamic, you could do that using querySelectorAllor any framework presenting similar functionality, like jQueryhere:
? 如果您希望列号是动态的，您可以使用querySelectorAll或任何具有类似功能的框架来实现，例如jQuery：
$('#myTable tr > *:nth-child(2)').hide();
(The jQuery solution also works on legacy browsers that don't support nth-child).
（jQuery 解决方案也适用于不支持 的旧版浏览器nth-child）。
回答by Dov Miller
you can also use:
您还可以使用：
<td style="visibility:hidden;">
or
<td style="visibility:collapse;">
The difference between them that "hidden" hides the cell but it holds the space but with "collapse" the space is not held like display:none. This is significant when hidding a whole column or row.
它们之间的区别是“隐藏”隐藏了单元格，但它保留了空间，但“折叠”时，空间不会像 display:none 那样保留。这在隐藏整列或整行时很重要。
回答by Rick Smith
Kos's answer is almost right, but can have damaging side effects. This is more correct:
科斯的回答几乎是正确的，但可能会产生破坏性的副作用。这是更正确的：
#myTable tr td:nth-child(1), #myTable th:nth-child(1) {
display: none;
}
CSS (Cascading Style Sheets) will cascadeattributes to all of its children. This means that *:nth-child(1)will hide the first tdof each trANDhide the first element of all tdchildren. If any of your tdhave things like buttons, icons, inputs, or selects, the first one will be hidden (woops!).
CSS（级联样式表）会将属性级联到其所有子项。这意味着*:nth-child(1)将隐藏td每个元素的第一个tr并隐藏所有td子元素的第一个元素。如果你td有按钮、图标、输入或选择之类的东西，第一个将被隐藏（哇！）。
Even if you don't currentlyhave things that will be hidden, image your frustration down the road if you need to add one. Don't punish your future self like that, that's going to be a pain to debug!
即使您目前没有要隐藏的东西，如果您需要添加一个东西，请想象一下您将来的挫败感。不要这样惩罚未来的自己，调试起来会很痛苦！
My answer will only hide the first tdand thon all trin #myTablekeeping your other elements safe.
我的回答只会隐藏第一个td和th所有内容，tr以#myTable确保您的其他元素安全。
回答by theapache64
Bootstrap people use .hiddenclass on <td>.
Bootstrap 人员.hidden在<td>.
回答by Colonel Panic
You can also hide a column using the col element https://developer.mozilla.org/en/docs/Web/HTML/Element/col
您还可以使用 col 元素隐藏列https://developer.mozilla.org/en/docs/Web/HTML/Element/col
To hide the second column in a table:
要隐藏表格中的第二列：
<table>
<col />
<col style="visibility:collapse"/>
<tr><td>visible</td><td>hidden</td></tr>
<tr><td>visible</td><td>hidden</td></tr>
Known issues: this won't work in Google Chrome. Please vote for the bug at https://bugs.chromium.org/p/chromium/issues/detail?id=174167
已知问题：这在 Google Chrome 中不起作用。请在https://bugs.chromium.org/p/chromium/issues/detail?id=174167为错误投票
回答by souvik sett
<style>
.hideFullColumn tr > .hidecol
{
display:none;
}
</style>use .hideFullColumn in table and .hidecol in th.You don't need to add class in td individually as it will be problem because index may not be in mind of each td.
在表中使用 .hideFullColumn 并在 th 中使用 .hidecol。您不需要在 td 中单独添加类，因为它会出现问题，因为索引可能不会考虑每个 td。
回答by tamarintech
You can also do what vs dev suggests programmatically by assigning the style with Javascript by iterating through the columns and setting the td element at a specific index to have that style.
您还可以通过遍历列并在特定索引处设置 td 元素以具有该样式来使用 Javascript 分配样式，从而以编程方式执行 vs dev 建议的操作。
回答by Albert
<!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);
