Question

我在ASPX中创建了一个表。我想根据需求隐藏其中一列，但HTML表格构建中没有visible之类的属性。我怎样才能解决我的问题？

Answer 1

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

<td style="display:none;">

Answer 2

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

Answer 3

你也可以使用：

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

它们之间的区别是“隐藏”隐藏了单元格，但是它占据了空间但是“崩溃”空间不像display：none那样。隐藏整列或整行时这很重要。

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的{{1}}和tr，以保证您的其他元素的安全。

Answer 5

Bootstrap人员使用.hidden上的<td>课程。

Answer 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

投票支持错误

Answer 7

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

使用表中的.hideFullColumn和.h中的.hidecol。你不需要单独在td中添加类，因为它会有问题，因为每个td都可能没有考虑索引。

Answer 8

你也可以通过迭代列并将特定索引处的td元素设置为具有该样式的方式，通过使用Javascript分配样式来以编程方式执行vs dev建议。

Answer 9

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

Answer 10

这是动态隐藏列的另一种解决方案

为要隐藏的列的 th 和 td 定义类

<table>
   <tr>
     <th> Column 1 </th>
     <th class="dynamic-hidden-col"> Column 2 </th>
     <th Column 3 </th>
  </tr>
  <tr>
     <td> Value 1 </td>
     <td class="dynamic-hidden-col"> Value 2 </td>
     <td> Value 3 </td>
  </tr>
     <td> row 2 Value 1 </td>
     <td class="dynamic-hidden-col"> row 2 Value 2 </td>
     <td> row 2 Value 3 </td>
  <tr>
</table>

这是隐藏列的 Jquery 脚本。

$('#hide-col').click(function () {      
    $(".dynmic-hidden-col").hide();
});

这样可以动态隐藏表格列。

如何隐藏HTML表格中的列？

10 个答案: