Question

我有一个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>

如您所见，在col3之后，所有后续列都为空。我只想显示前三列并隐藏其余列。我怎样才能使用CSS实现这一目标。我无法控制HTML表格，所以我无法修改它。

谢谢

Answer 1

你确实可以这样做：

http://jsfiddle.net/nEQ6g/1/

*编辑 - 根据我的知识nth-child和visability: hidden不要在一起玩得很好。根据我提供给您的代码，您需要使用display: none;。

CSS：

table{
    border-collapse: collapse;
}

table tr td{
    padding: 10px;
    border: 1px solid #ccc;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
}

table tr td:nth-child(n+4){
    display: none;
}

Answer 2

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

http://jsfiddle.net/hZRvx/

我认为这是最明确的做法。

Answer 3

使用类似的东西......

<强> CSS

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

的 DEMO

Answer 4

您可以使用css3 nth child选择器，例如

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

jsFiddle here

Answer 5

我不知道意图，原因或受众是什么，但是如果你将数据属性附加到每个列单元格......

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

然后，您可以使用jQuery隐藏属于特定列的所有单元格...

$('td[data-col=1]').hide ();

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

希望它有意义

Answer 6

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

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

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

使用visibility: hidden;，您仍然可以保留其间距。

jsFiddle

Answer 7

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

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

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

7 个答案:

的 DEMO

jsFiddle