在 CSS 中隐藏表格列答案

【问题标题】：Hide Table Column in CSS在 CSS 中隐藏表格列
【发布时间】：2016-02-26 18:04:45
【问题描述】：

我有一个表，它是由我正在使用的某些软件自动生成的，该表是 QOProducts 并且有如下四列：

<table id="QOProducts" border="1" style="visibility: visible; display: block;">
<tbody>
<tr>
<th>
<b>Thumbnail</b>
</th>
<th style="width:250px;">
<b>Product Name</b>
</th>
<th style="width:150px;">
<b>Description</b>
</th>
<th>
<b>Quantity</b>

我尝试了几种方法，但有谁知道是否可以隐藏全局 css 文件中的第二列，因为我没有直接访问该页面的权限。还是我需要使用 jQuery？

任何想法表示赞赏。

【问题讨论】：

How to hide columns in HTML table?的可能重复

标签： html css dom

【解决方案1】：

您正在这里寻找nth-child(n) 选择器，在你的情况下，你想隐藏第二个 column 所以我假设你的意思是每个 tr 的 second td。

这将加起来

#QOProducts tr td:nth-child(2) {
    display: none;
}

即使只针对td 中的tr - 如果您不确定自己的结构，您可以简化选择器并使其更具全局性。

#QOProducts > * > td:nth-child(2) {
    display: none;
}

这将仅针对表的直接子级的直接td 子级（如果这对您有任何意义）

如果您还需要隐藏任何嵌套表等的第二个 td，您可以随时执行此操作

#QOProducts td:nth-child(2) {
    display: none;
}

这将为您隐藏所有第二个孩子 td。

【讨论】：

【解决方案2】：

如果您想要一个不需要nth-child（IE8 等旧浏览器不支持）的解决方案，您可以利用这些旧浏览器确实支持first-child这一事实。

#QOProducts th:first-child + th, #QOProducts td:first-child + td {
  display:none;
}

<table id="QOProducts" border="1" >
  <tbody>
    <tr>
      <th>
        <b>Thumbnail</b>
      </th>
      <th style="width:250px;">
        <b>Product Name</b>
      </th>
      <th style="width:150px;">
        <b>Description</b>
      </th>
      <th>
        <b>Quantity</b> 
    <tr><td>test<td>test<td>test<td>test</tr>
</table>

【讨论】：

我实际上正在考虑将+ 相邻运算符添加到答案中，但我想，嗯 - 2k15 与 IE 11 和 Edge 12 ^.^
@SidneyLiebrand 呵呵...实际上我的解决方案中只有第 n 个孩子，但是当我准备点击“发布”按钮时，我看到已经有 3 个答案，所以我不得不做 something 来添加一些有用的东西，而不是把我的答案扔掉。

【解决方案3】：

尝试在你的 CSS 中添加它

tr > th:nth-of-type(2),
tr > td:nth-of-type(2) {
  display: none;
}

【讨论】：

【解决方案4】：

这应该可以工作

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

【讨论】：