How to target table with ID?

Question

I am using datatables and using below css to hide the header of the table.

table.dataTable thead {
    display: none;
}

Now what is happening is I have two tables with id as userList1 & userList2.

What I want to do is apply this css for only table with id as userList1.

Any idea how to get this done?

I tried

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

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

but none is working.

I am not sure whether above is right or wrong, but I tried. I am newbie for CSS.

HTML Code is

Table 1

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

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

Note : I have two table..

Table 1 have inner tables as table 2...

So table I have is

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

Note I am using JSF language and inner table ids are created by JSF...

JSFiddle Link

Here `#userList1.dataTable thead ` or just `#userList1 thead ` your original code does not work because `table` is not a class so `#userList1.table` targets nothing. If these don't work then you will need to provide the table markup. Just the table tag is fine, don't need the guts of it — Huangism, Jul 31 '14 at 20:28
One of the problems is the dot in `#userList1.table` as that is used to select a class, not a tag. — imtheman, Jul 31 '14 at 20:37
@Vucko : my mistake... can you give me solution for the updated questions? — Fahim Parkar, Jul 31 '14 at 20:41
@FahimParkar and what are you trying to hide inside that main table (`#userList`)? — Vucko, Jul 31 '14 at 20:43
main table I am not using header, but for inner tables I am using header to show date... — Fahim Parkar, Jul 31 '14 at 20:45
@FahimParkar and you want to hide _all_ inner table headers or of some specific inner table? — Vucko, Jul 31 '14 at 20:47
@Vucko : still not working... I think the big reason is `userList` is present in second id tooo.. — Fahim Parkar, Jul 31 '14 at 20:52
Next time it'd be really nice if you updated with the HTML you're actually using instead of updating it multiple times. — jonsuh, Jul 31 '14 at 21:00
@FahimParkar check your HTML source(crtl+u in browser), maybe it's rendering differently. — Vucko, Jul 31 '14 at 21:09
@Vucko : grrrr... i don't why but it is working now... thanks mate for help... — Fahim Parkar, Jul 31 '14 at 21:09
@FahimParkar, we cannot know why it is working at your end because we cannot see. Your jsfiddle apparently does not correspond to what you actually have. — Jukka K. Korpela, Jul 31 '14 at 21:10

jonsuh · Accepted Answer · 2014-07-31T20:54:29.473

2

If you want to hide the header of the outer table:

#userList thead {
  display: none;
}

If you want to hide all of the headers of the inner table:

#userList table thead {
  display: none;
}

If you want to hide the header of one of the inner tables, based on @steveax's solution:

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

edited Jul 31 '14 at 20:54

answered Jul 31 '14 at 20:35

jonsuh

2,875
1
18
23

@FahimParkar which ever table you are trying to target, just do `#tableID thead` and you are good to go – Huangism Jul 31 '14 at 20:39
if I use your code, inside tables header also getting hided... see my question again please, I have updated code.. see the inner tables id... I think that is causing problem... – Fahim Parkar Jul 31 '14 at 20:40
My code is generating ids like that.. I am not generating... I am using JSF and its generating ids like that... – Fahim Parkar Jul 31 '14 at 20:42
please check updated question one more time.. I have made it simple and clear... see how I have table at the end... – Fahim Parkar Jul 31 '14 at 20:43
I cannot control JSF... as those are inner tables, jsf is creating ids like that... any solution for this? – Fahim Parkar Jul 31 '14 at 20:46
2

[`id` selectors can indeed include colons, you just have to escape them](http://stackoverflow.com/a/6592488/557612) (`\:`) – steveax Jul 31 '14 at 20:50
@steveax Ah forgive me, I'm completely mistaken. Had no clue you can escape colors, let alone other special characters. – jonsuh Jul 31 '14 at 20:51
@jonsuh : I want to hide the main table header only... I don't want to hide inner tables header... just main outer table header... – Fahim Parkar Jul 31 '14 at 20:57
@FahimParkar Pick and choose one of the appropriate suggestions – jonsuh Jul 31 '14 at 20:58

Hector · Answer 2 · 2014-08-01T11:27:06.040

0

try this :

#userlist.dataTable thead {
display:none;
}

and you shuold use display:none; only for headers that you want to hide it.

for hiding only one thead you can use inline styles.

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

JSFIDDLE

edited Aug 01 '14 at 11:27

answered Jul 31 '14 at 20:35

Hector

216
2
10

you can edit your HTML and use inline styles.i edited the answer. – Hector Aug 01 '14 at 11:25

How to target table with ID?

JSFiddle Link

2 Answers2