用于隐藏表格中多列的 CSS [英] CSS for hiding multiple columns in a table

问题描述

我有一张类似于 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 选择器取消隐藏每行的第二个 ，有效地显示第二列.

Use nth-child selector to un-hide the 2nd <td> of every row, effectively showing the 2nd column.

这篇关于用于隐藏表格中多列的 CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！