如何隐藏HTML表格中的列？

Question

我在ASPX中创建了一个表.我想根据需求隐藏其中一列,但visibleHTML表格中没有属性.我怎样才能解决我的问题？

Answer 1

您需要使用样式表来实现此目的.

<td style="display:none;">

@office302 仅将此样式应用于第一个 td？或者你只想使用 CSS - 这你可以做这样的事情 `td:first-child { display:none; }` (2认同)

Answer 2

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

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

这是在假设列N的单元格(它是a th或td)始终是其行的第N个子元素的情况下工作的.

如果您希望列号是动态的,您可以使用querySelectorAll或任何呈现类似功能的框架来执行此操作,如下所示jQuery:

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

Answer 3

你也可以用:

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

它们之间的区别是"隐藏"隐藏了单元格,但是它占据了空间但是"崩溃"的空间并不像display:none那样.隐藏整列或整行时这很重要.

`visibility:collapse`专门用于处理单元格显示/隐藏,因为在重新计算单元格宽度/高度与`display:none`之间存在差异.请参阅https://developer.mozilla.org/en-US/docs/Web/CSS/visibility#Values (5认同)
我发现 div 标签折叠也会保留空间。对于 div 标签，您必须使用 display: none; 才能真正崩塌，守不住空间。 (2认同)

Answer 4

科斯的答案几乎是正确的,但可能会产生破坏性的副作用.这更正确:

#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保证您的其他元素的安全.

Answer 5

Bootstrap人使用.hidden课程<td>.

Answer 6

要隐藏表中的第二列：

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