Question

此代码适用于IE以外的浏览器：

table.tbl.tr.td:first-child { display: none; }

我应该使用什么来使其适用于所有浏览器？

Answer 1

上面的表达根本不起作用。 table.tbl.tr.td将选择一个如下定义的表元素：<table class="tbl tr td">但不是其单元格。

应该是这样的，并且Internet Explorer 6上面几乎所有浏览器都支持:first-child selector：

table.tbl tr td:first-child { display: none; }

Answer 2

不幸的是，旧版本的IE不支持：CSS中的第一个孩子。不知道IE8。无论如何，如果你不想做javascript，并且你可以访问html，那么很容易将“第一”类分配给表格中的第一列tds。所以html看起来像：

<table>
  <tr>
    <td class="first">...</td>
    <td>..</td>
    ..
  </tr>
</table>

然后，您可以创建一个css条目，如：

table td.first { display: none; }

Answer 3

隐藏第一列

table td:nth-child(1){ display:none;}

在Chrome + FireFox中正常运行，但在IE

中无效

使用Jquery处理跨平台问题：

$('table td:nth-child(1)').hide();

适用于所有浏览器！

Answer 4

只需使用：

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

其中n是您要隐藏的列。

以下是一个用法示例：

table.marks.hideSubject       {td:nth-child(1) {display: none;}}
table.marks.hideDescription   {td:nth-child(2) {display: none;}}
table.marks.hideMark          {td:nth-child(3) {display: none;}}
table.marks.hideRank          {td:nth-child(4) {display: none;}}

Answer 5

可悲的是，可以做的很少。 <colgroup>看起来很诱人，但浏览器会以不同方式对待它您可能必须为每个单元格手动添加一个类，或使用JavaScript。

Answer 6

嗯，简短的回答是你无法在早期版本的IE中使用它。我猜IE8会处理它。有一个名为表达式的CSS黑客可以解决这个问题，但表达式是一个糟糕的主意，我甚至不会告诉你如何去做。

保持CSS的原样，如果客户端在IE上，则添加一个在DOMReady上为你做同样的JavaScript。

Answer 7

对于IE，您应该/可以为表列设置col和colspans，然后在CSS中隐藏它们。

据我所知，这只适用于IE，其中（一次，它的功劳）具有col和colspan的最佳实现。其他浏览器在这里很弱（但它只是规范的一小部分）

Answer 8

通过使用CSS nth-child，我们可以隐藏列。只需要指定TABLE ID和Column Indexes 在这个例子中，我隐藏了表的最后3列。

<style>
    #ID_OF_THE_TABLE tr *:nth-child(10),tr *:nth-child(9),tr *:nth-child(8){
        display: none;
    }
</style>

Answer 9

对我有用的解决方案是：

td { display: none; }
td + td { display: table-cell; }

不需要JavaScript，也不需要额外的课程。

干杯

通过CSS隐藏表的第一列的方法

9 个答案: