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>，有效地显示第二列。

Answer 2

您可以使用CSS3 :nth-child() selector

td:nth-child(3), td:nth-child(4) {
  display: none
}

jsfiddle here

Answer 3

我很惊讶没有人提到一般的兄弟选择器。 (More info here)如果您只需要显示第二列，我会在第一个单元格中应用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;
}

Answer 4

你走了。

CSS：

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

<强> WORKING DEMO

Answer 5

javac

您可以在表格中使用.hideFullColumn，并在要隐藏的标记中使用.hidecol。您无需担心td，因为这些将自动隐藏。

伪类很好但是如果你有50列并且必须隐藏20，那么你必须重复“td：nth-child（1），td：nth-child（2），.... “记住指数20次。但在这种情况下，您可以在创建时添加.hidecol类，因此您无需修改索引。

你可以尝试这个，请告诉我它是否有效。

用于隐藏表中多列的CSS

5 个答案: