隐藏CSS中的表列的问题

Question

我找到了如何隐藏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属性时，如何正确隐藏表格列？

Answer 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>

以下是代码段。

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>

Answer 2

你有没有尝试过：

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

没有规则知道“n”。你需要在nth-child（）方法中加一个数字。

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

请参阅我的简单示例： https://jsfiddle.net/cvaxzvey/