Html 用于隐藏表格中多列的 CSS
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20090764/
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
CSS for hiding multiple columns in a table
提问by Merin Nakarmi
I have a table similar to the one illustrated below in a SharePoint site. I cannot modify the table as it is generated dynamically but I can add external CSS to override its style. I am required to show only second column and hide first, third and fourth column.
我有一张类似于 SharePoint 网站中如下所示的表格。我无法修改表格，因为它是动态生成的，但我可以添加外部 CSS 来覆盖其样式。我只需要显示第二列并隐藏第一、第三和第四列。
The pseudo class to hide first column is
隐藏第一列的伪类是
table#student tr td:first-child { display: none; }
Please help me with pseudo class or any other trick to hide third and forth column.
请帮助我使用伪类或任何其他隐藏第三和第四列的技巧。
<table id="student">
<tr>
<td>Role</td>
<td>Merin</td>
<td>Nakarmi</td>
<td>30</td>
<tr>
<td>Role</td>
<td>Tchelen</td>
<td>Lilian</td>
<td>22</td>
</tr>
<tr>
<td>Role</td>
<td>Suraj</td>
<td>Shrestha</td>
<td>31</td>
</tr>
</table>
回答by AlienHoboken
CSS3:
CSS3：
table#student td {
display: none;
}
table#student td:nth-child(2) {
display: block;
}
Use nth-childselector to un-hide the 2nd <td>of every row, effectively showing the 2nd column.
使用nth-child选择器取消隐藏<td>每行的第 2行，有效地显示第 2 列。
回答by Aurélien Gasser
You can use the CSS3 :nth-child() selector
您可以使用 CSS3 :nth-child() 选择器
td:nth-child(3), td:nth-child(4) {
display: none
}
回答by stealththeninja
I'm surprised no one mentioned the general sibling selector. (More info here)If you only need to show second column, I'd apply a display: none;style to the first cell and all cells after the second one.
我很惊讶没有人提到一般的兄弟选择器。（更多信息在这里）如果您只需要显示第二列，我会将display: none;样式应用于第一个单元格和第二个单元格之后的所有单元格。
table#student td:first-child,
table#student td:nth-child(2) ~ td {
display: none;
}<table id="student">
<tr>
<td>Role</td>
<td>Merin</td>
<td>Nakarmi</td>
<td>30</td>
<tr>
<td>Role</td>
<td>Tchelen</td>
<td>Lilian</td>
<td>22</td>
</tr>
<tr>
<td>Role</td>
<td>Suraj</td>
<td>Shrestha</td>
<td>31</td>
</tr>
</table>If you need to support IE7 and IE8 for some reason, you could replace the :nth-child()selector with the adjacent sibling selector:
如果出于某种原因需要支持 IE7 和 IE8，您可以将:nth-child()选择器替换为相邻的兄弟选择器：
table#student td:first-child,
table#student td + td ~ td {
display: none;
}
回答by Nitesh
Here you go.
干得好。
The CSS:
CSS：
table#student tr td:first-child, table#student tr td:nth-child(3), table#student tr td:nth-child(4) { display: none; }
回答by souvik sett
.hideFullColumn tr > .hidecol
{
display:none;
}You can use .hideFullColumn in the table and use .hidecol in the tag which you want to hide. You don't need to worry about td as those will automatically be hidden.
您可以在表中使用 .hideFullColumn 并在要隐藏的标签中使用 .hidecol 。您无需担心 td，因为它们会自动隐藏。
Pseudo class is fine but if you have 50 columns and have to hide 20, then you'd have to repeat the "td:nth-child(1),td:nth-child(2),...." 20 times by keeping the index in mind. But in this case you can add the .hidecol class on creating th, so you don't need to revise index.
伪类很好，但是如果您有 50 列并且必须隐藏 20，那么您必须重复“td:nth-child(1),td:nth-child(2),....”20 次通过牢记索引。但是在这种情况下，您可以在创建 th 时添加 .hidecol 类，因此您不需要修改索引。
You can try this and please let me know if it works.
你可以试试这个，如果它有效，请告诉我。
