如何使用CSS在HTML表格中隐藏某些表格列

我有一个html表，如下所示

<table class="report">
    <tbody>
      <tr>
        <td >col1</td>
        <td >col2</td>
        <td>col3</td>
        <td >&nbsp;</td>
        <td >&nbsp;</td>
        <td >&nbsp;</td>
        <td >&nbsp;</td>
      </tr>
      <tr>
        <td>R2</td>
        <td >2/17</td>
        <td >{2/17}</td>
        <td >&nbsp;</td>
        <td >&nbsp;</td>
        <td >&nbsp;</td>
        <td >&nbsp;</td>
      </tr>
    </tbody>
</table>

可乐
可乐
可乐
R2
2/17
{2/17}

如您所见，在col3之后，所有后续列都是空的。 我只想显示前三列，隐藏其余的列。 如何使用CSS实现这一点。 我不能控制HTML表，所以我不能修改它

谢谢

td:nth-child(n+4) {
    visibility: hidden
}

我认为这是最清楚的方法

---

我认为这是最清晰的方法。

您可以使用css3

n子选择器，例如

td:nth-child(4),td:nth-child(5), ...
{
   display:none;
}

您可以使用css3
第n个子项
选择器，例如

td:nth-child(4),td:nth-child(5), ...
{
   display:none;
}

这是一个jquery解决方案。它会检查里面是否只有一个空格。。。如果是，它会隐藏它

$('td').each(function(){
  if($(this).html() == " ")
      $(this).hide();
});

这是一个jquery解决方案。它会检查里面是否只有一个空格。。。如果是，它会隐藏它

$('td').each(function(){
  if($(this).html() == " ")
      $(this).hide();
});

我不知道其目的、原因或受众是什么，但如果在每个列单元格中附加一个数据属性

<td data-col="1"></td>

您也可以使用“：nth child（）”css伪类，但某些IE浏览器不支持它

希望它有意义
我不知道它的目的、原因或受众是什么，但是如果您在每个列单元格中附加一个数据属性

<td data-col="1"></td>

您也可以使用“：nth child（）”css伪类，但某些IE浏览器不支持它

希望它有意义
如果您总是想显示前3列，并隐藏您可能要使用的行中的其余列：

tr > td:nth-child(n+4)
{
    visibility: hidden;
}

这将从索引4开始，循环遍历其余部分并隐藏它们

具有
可见性：隐藏您仍将保持它的间距

如果始终希望显示前3列并隐藏行中的其余列，则可能需要使用：

tr > td:nth-child(n+4)
{
    visibility: hidden;
}

这将从索引4开始，循环遍历其余部分并隐藏它们

具有
可见性：隐藏您仍将保持它的间距

用这样的东西

CSS

td:nth-child(4), td:nth-child(5), td:nth-child(6), td:nth-child(7)
{
   display:none;
}

使用类似于以下内容的内容

CSS

td:nth-child(4), td:nth-child(5), td:nth-child(6), td:nth-child(7)
{
   display:none;
}

您确实可以做到这一点：


*编辑-据我所知，第n个孩子
和
可视性：隐藏
不要一起玩得很好。对于您想要的，您需要使用
display:none-基于我提供给您的代码

CSS:

你确实可以这样做：


*编辑-据我所知，第n个孩子
和
可视性：隐藏
不要一起玩得很好。对于您想要的，您需要使用
display:none-基于我提供给您的代码

CSS:

我不想修改HTMLIf如果他这么做了，他甚至不需要第N个孩子。你只需要把新类隐藏起来，我不想修改HTMLIf如果他这么做了，他甚至不需要第n个孩子。您只需隐藏包含新类的类..是否使用jquery？如果是，请参阅我的帖子。。。无需修改htmlnow您已接受mat的Answare。。。但现在我有个问题要问你。。。为什么你有空的td？因为mat的解决方案有点严格，只有在使用同样需要的js时才能真正动态地更改。这个表是使用ApachePOI从XLS文件生成的。它还生成空列，生成的HTML显示在使用Iframe的web应用程序中，我没有访问JS的权限。因此，我计划将此CSS与生成的html一起注入。顺便说一句，谢谢你的帮助。没问题，像查理这样的人看不出我只是想帮忙，然后把帖子发到。。。最后我不知道他想用这个实现什么。你在用jquery吗？如果是，请参阅我的帖子。。。无需修改htmlnow您已接受mat的Answare。。。但现在我有个问题要问你。。。为什么你有空的td？因为mat的解决方案有点严格，只有在使用同样需要的js时才能真正动态地更改。这个表是使用ApachePOI从XLS文件生成的。它还生成空列，生成的HTML显示在使用Iframe的web应用程序中，我没有访问JS的权限。因此，我计划将此CSS与生成的html一起注入。顺便说一句，谢谢你的帮助。没问题，像查理这样的人看不出我只是想帮忙，然后把帖子发到。。。最后我不知道他想用这个做什么。这会隐藏第三列。我想显示前三列，然后隐藏第三列。是的，我的计数很糟糕。但是你明白了，有人投了反对票？？只要把3改成4就行了。尽管如此，在CSS3中做这么简单的事情是不被推荐的（我有时使用lynx，这就是为什么我更喜欢CSS2）这将隐藏第三列。我想显示前三列并在第三列之后隐藏列。是的，我的计数很糟糕。但是你明白了，有人投了反对票？？只要把3改成4就行了。尽管如此，在CSS3中做如此简单的事情根本不被推荐（我有时使用lynx，这就是为什么我更喜欢CSS2）OP要求一个CSS解决方案，但他也说他不想编辑他的html。。。在这种情况下，没有其他可能性。因此，也许他会使用jquery或类似的工具，这样会有所帮助。我同意给OP选择是件好事。他要求CSS，但这可能是因为他不知道其他可用的方法。为什么不给他选择？没有选择。。。他唯一能做的就是编辑html或使用javascript/jquery或php:）@Dwza LOL你知道这是完全错误的，对吗？这很容易通过CSS完成。OP要求CSS解决方案，但他也说他不想编辑他的html。。。在这种情况下，没有其他可能性。因此，也许他会使用jquery或类似的工具，这样会有所帮助。我同意给OP选择是件好事。他要求CSS，但是