html - 用于在表格中隐藏多列的 CSS

Question

我在 SharePoint 站点中有一个类似于下图所示的表格。我无法修改表格，因为它是动态生成的，但我可以添加外部 CSS 来覆盖其样式。我只需要显示第二列并隐藏第一、第三和第四列。

隐藏第一列的伪类是

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>

Answer 1

CSS3:

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

使用 nth-child选择器取消隐藏第二个 <td>每一行，有效地显示第二列。