Html 用于在表中隐藏多个列的CSS

我有一个类似于下面SharePoint网站中所示的表。我不能修改表，因为它是动态生成的，但是我可以添加外部CSS来覆盖它的样式。我被要求只显示第二列，隐藏第一、第三和第四列

<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>

要隐藏第一列的伪类是

table#student tr td:first-child { 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>

角色
梅林
纳卡米
30
角色
切伦
丽莲
22
角色
苏拉杰
什雷斯塔
31

CSS3：

table#student td {
   display: none;
}
table#student td:nth-child(2) {
   display: block;
}

使用第n个子项选择器取消隐藏每行的第2个

，有效地显示第2列。

您可以使用CSS3

给你

CSS:

table#student tr td:first-child, table#student tr td:nth-child(3), table#student tr td:nth-child(4)  { display: none; }

.hiddevelcolumn tr>.hidecol
{
显示：无；
}

我很惊讶没有人提到通用同级选择器。如果只需要显示第二列，我将应用

display:none样式


表#学生td：第一个孩子，
表#学生td:N个孩子（2）~td{
显示：无；
}

角色
梅林
纳卡米
30
角色
切伦
丽莲
22
角色
苏拉杰
什雷斯塔
31
不要使用它，因为它只会隐藏这些天，显示：表格单元格；更合适。不幸的是，这会使用
colspan
打破表格。