在 CSS 中隐藏表格列的问题答案

【问题标题】：Problems hiding a table column in CSS在 CSS 中隐藏表格列的问题
【发布时间】：2015-05-13 18:53:02
【问题描述】：

我找到了如何在this thread 中隐藏表格列：

<style>
  table tr th:nth-child(4){ display:none; }
  table tr td:nth-child(4){ display:none; }
</style>

但是，当我使用 colspan 和 rowspan 属性时，这似乎无法正常工作。在this table 上，某些单元格的内容丢失了，右边框也丢失了。

请注意，每次行以rowspan 开头时，内容和右边框都会丢失。

当我使用colspan 和rowspan 属性时，如何正确隐藏表格列？

【问题讨论】：

jsfiddle.net/vasanthanvas/raxwvvdj 它为我工作
@vasanth - 是的，我知道在你的测试中它有效。但我在我的问题中特别说过（两次！）它不能与rowspan 和colspan 一起正常工作。
@0_o - 不，这行不通。它将使内容不可见，但单元格边框仍然可见，并且仍然会占用空间。
尝试使用opacity:0 而不是display:none 作为最后一个元素example
它没有占用额外的空间，我添加了一个div 小提琴：- jsfiddle.net/victor_007/mq2uyuv9/3

标签： css

【解决方案1】：

尝试将nth-child 也用于tr 希望能解决你的问题。

<style>
  table tr:nth-child(4) th:nth-child(1){ display:none; }
  table tr:nth-child(4) td:nth-child(1){ display:none; }
</style>

这里是代码 sn-p。

table,th,td{border:1px solid black;}
table.new tr:nth-child(4) td{display:none;}
table.new tr:nth-child(2) td:nth-child(2){display:none;}

 <table>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td rowspan="2">$100</td>
  </tr>
  <tr>
    <td>February</td>
    
  </tr>
  <tr>
    <td colspan="2">Sum: $180</td>
  </tr>
   <tr>
    <td>Mar</td>
    <td >$100</td>
  </tr>
  <tr>

</table>

<span>table after hiding row/column with  rowspan/colspan </span>
 <table class="new">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td rowspan="2">$100</td>
  </tr>
  <tr>
    <td>February</td>
    
  </tr>
  <tr>
    <td colspan="2">Sum: $180</td>
  </tr>
   <tr>
    <td>Mar</td>
    <td >$100</td>
  </tr>
  <tr>

</table>

【讨论】：

【解决方案2】：

你试过了吗：

table tr th:nth-child(3), table tr td:nth-child(3){
 display: none;
}

没有规则知道“n”。您需要在 nth-child() 方法中输入一个数字。

所以对于您的示例链接，我使用了 n = 3

看我的简单例子： https://jsfiddle.net/cvaxzvey/

【讨论】：

“您需要在 nth-child() 方法中输入一个数字”。阅读本文档。 developer.mozilla.org/en-US/docs/Web/CSS/:nth-child
我去掉了“n”，这里确实没有功能。不会改变任何东西。但是，“n”是定义的，如果您希望表格中每隔三行使用不同的颜色，甚至是必要的：“3n”。
对不起，您对定义的 n 是正确的。您指向示例的链接没有 4 列，因此在此处无效。试试 3??