如何使用 ID 定位表？

Question

我正在使用数据表并使用下面的 css 来隐藏表格的标题。

table.dataTable thead {
    display: none;
}

现在发生的事情是我有两个表，ID 为 userList1 和 userList2。

我想要做的只是将此 css 应用于 id 为 userList1 的表。

知道如何完成这项工作吗？

我试过了

#userList1.table.dataTable thead {
    display: none;
}

#userList1 > table.dataTable thead {
    display: none;
}

但没有一个工作。

我不确定上面是对还是错，但我试过了。我是 CSS 新手。

---

HTML代码是

表 1

<table id="userList" class="responsive dataTable" dir="LTR" style="width: 100%;border: 0px;" aria-describedby="userList_info">

表 2

<table id="userList:2:userList2" class="responsive appointments" dir="LTR"></table>
<table id="userList:1:userList2" class="responsive appointments" dir="LTR"></table>
<table id="userList:0:userList2" class="responsive appointments" dir="LTR"></table>

注意：我有两张桌子..

表 1 有内表作为表 2...

所以我的桌子是

<table id="userList" class="responsive dataTable" dir="LTR" style="width: 100%;border: 0px;" aria-describedby="userList_info">

    <table id="userList:2:userList2" class="responsive appointments" dir="LTR"></table>
    <table id="userList:1:userList2" class="responsive appointments" dir="LTR"></table>
    <table id="userList:0:userList2" class="responsive appointments" dir="LTR"></table>

</table>

注意我使用的是 JSF 语言，内表 ID 是由 JSF 创建的...

JSFiddle Link

Answer 1

试试这个：

#userlist.dataTable thead {
display:none;
}

你应该使用 display:none;仅适用于您要隐藏的标题。

对于只隐藏一个标题，您可以使用内联样式。

    <table id="userList" class="dataTable" border="1">
        <thead style="display:none;">
            <tr>
                <td>This is what I want to hide</td>
            </tr>
        </thead>

JSFIDDLE

Answer 2

如果要隐藏外表的表头：

#userList thead {
  display: none;
}

如果要隐藏所有内表的表头：

#userList table thead {
  display: none;
}

如果你想隐藏其中一个内表的表头，基于@steveax的解决方案：

#userList #userList\:2\:userList2 thead {
  display: none;
}