html - css隐藏div




用于隐藏表中多列的CSS (4)

我有一个类似于下面在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>

CSS3:

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

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


干得好。

CSS:

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

工作演示


我很惊讶没有人提到一般的兄弟选择。 (更多信息在这里)如果你只需要显示第二列,我会应用一个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>

如果您由于某种原因需要支持IE7和IE8,则可以使用相邻的兄弟选择器替换:nth-child()选择器:

table#student td:first-child,
table#student td + td ~ td {
  display: none;
}

.hideFullColumn tr > .hidecol
{
    display:none;
}

您可以在表格中使用.hideFullColumn,并在要隐藏的标签中使用.hidecol。 你不需要担心TD,因为那些会自动隐藏。

伪类是好的,但如果你有50列,并且必须隐藏20,那么你必须重复“td:nth-​​child(1),td:nth-​​child(2),...”20次记住索引。 但在这种情况下,您可以添加.hidecol类创建th,所以你不需要修改索引。

你可以试试这个,请让我知道它是否有效。





pseudo-class