Html 通过CSS隐藏表格第一列的方法
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1866907/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Ways to hide first column of table through CSS
提问by RKh
This code is working on browsers other than IE:
此代码适用于 IE 以外的浏览器：
table.tbl.tr.td:first-child { display: none; }
What shall I use for to make it work on all browsers?
我应该用什么来让它在所有浏览器上工作？
回答by poke
Your expression above won't work at all. table.tbl.tr.tdwill select a table element that is defined like this: <table class="tbl tr td">but not its cells.
你上面的表达根本行不通。table.tbl.tr.td将选择一个这样定义的表格元素：<table class="tbl tr td">但不是它的单元格。
It should be like this and the :first-childselectoris supported in pretty much all browsers above Internet Explorer 6:
它应该是这样的，并且几乎所有 Internet Explorer 6 以上的浏览:first-child器都支持选择器：
table.tbl tr td:first-child { display: none; }
回答by Linus
Unfortunately, older versions of IE do not support :first-child in CSS. Don't know about IE8. Anyways, if you don't want to do javascript, and you have access to the html, it's pretty easy to assign a "first" class to the first column tds in the table. So the html will look like:
不幸的是，旧版本的 IE 不支持 CSS 中的 :first-child。不知道IE8。无论如何，如果您不想使用 javascript，并且您可以访问 html，那么将“第一”类分配给表中的第一列 tds 非常容易。所以html看起来像：
<table>
<tr>
<td class="first">...</td>
<td>..</td>
..
</tr>
</table>
You can then create a css entry like:
然后，您可以创建一个 css 条目，例如：
table td.first { display: none; }
回答by FunMatters
Hide first column
隐藏第一列
table td:nth-child(1){ display:none;}
Works OK in Chrome + FireFox but not in IE
在 Chrome + FireFox 中工作正常，但在 IE 中无效
Use Jquery to handle cross platform issues using:
使用 Jquery 处理跨平台问题：
$('table td:nth-child(1)').hide();
works in all browsers!
适用于所有浏览器！
回答by HasanAboShally
Simply use:
只需使用：
table td:nth-child(n){
display:none;
}
Where n is the column you want to hide.
其中 n 是您要隐藏的列。
Here is an usage example:
这是一个使用示例：
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;}}
回答by Kobi
Sadly, very little can be done. <colgroup>seems tempting, but browsers treat it differently.
You may have to manually add a class for each cell, or use JavaScript.
可悲的是，能做的很少。<colgroup>看起来很诱人，但浏览器对它的处理方式不同。
您可能需要为每个单元格手动添加一个类，或者使用JavaScript。
回答by dxh
Well, the short answer is you can't get this working in earlier versions of IE. I'm guessing IE8 would handle it. There's a CSS hack called expressionsthat would solve the issue but expressions are such a bad idea I won't even show you how to do it.
好吧，简短的回答是您无法在早期版本的 IE 中使用它。我猜 IE8 会处理它。有一个叫做表达式的 CSS hack可以解决这个问题，但表达式是一个糟糕的主意，我什至不会向你展示如何去做。
Keep your CSS the way it is, and add a JavaScript that does the same for you on DOMReady if the client is on IE.
保持你的 CSS 原样，并添加一个 JavaScript，如果客户端在 IE 上，则在 DOMReady 上为你做同样的事情。
回答by Naveen1425
By using CSS nth-child we can hide the columns.
Just need to specify the TABLE ID and Column Indexes.
In this example i am hiding last 3 columns of the table.
通过使用 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>
回答by Mohammer
the solutions, that worked for me, was:
对我有用的解决方案是：
td { display: none; }
td + td { display: table-cell; }
No need of JavaScript, no need of an extra class.
不需要 JavaScript，不需要额外的类。
Cheers
干杯
回答by edeverett
For IE you should/could be able set up col and colspans for your table columns then hide those in CSS.
对于 IE，您应该/可以为您的表格列设置 col 和 colspans，然后将它们隐藏在 CSS 中。
As far as I know this will only work in IE, which (for once, to it's credit) has the best implementation of col and colspan. Other browsers are weak here (but it's a very minor part of the spec)
据我所知，这只适用于 IE，它（这一次，值得称赞）拥有 col 和 colspan 的最佳实现。其他浏览器在这里很弱（但它是规范中很小的一部分）
