用于在表中隐藏多个列的CSS [英] CSS for hiding multiple columns in a table
本文介绍了用于在表中隐藏多个列的CSS的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我有一个类似于下面在SharePoint网站中所示的表。我不能修改表,因为它是动态生成的,但我可以添加外部CSS来覆盖它的样式。我需要显示只有第二列,隐藏第一,第三和第四列。
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.
隐藏第一列的伪类是
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>
推荐答案
CSS3:
table#student td {
display: none;
}
table#student td:nth-child(2) {
display: block;
}
使用 nth-child
选择器来取消隐藏每一行的第二个< td>
,有效地显示第二列。
Use nth-child
selector to un-hide the 2nd <td>
of every row, effectively showing the 2nd column.
这篇关于用于在表中隐藏多个列的CSS的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文