How to target table with ID?


Tags: html,css,jsf,jsf-2

Problem :

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



Solution :

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

    CSS Howto..

    How to align radio buttons inside a DIV?

    How to change the background color of a span/div WITHOUT CSS [closed]

    How to add your customise arrows in slick slider JS using CSS

    R shiny: How to change the width of a progress-bar

    Html, CSS - How to create a donut chart like this?

    How do i automatically resize Fonts and Images (complete Website) on window-resize?

    How to make element stay in the same position using css?

    How to make text vertical in a jQuery UI Layout toggler?

    How to use JS to target specific domain html links with CSS classes?

    How to use GitHub's primer and octicons?

    How do I use CSS to control which part of an image shows in mobile version of site?

    How to style the NSString using CSS?

    How to dynamically import javascript and css files

    How to make a content div stretch from a header div to a footer div?

    How to keep active menu item underlined?

    How does this drop-down have the ^ shown?

    CSS how to vertically center image and text without changing style of image

    How to reserve a DIV width with “left:100%” CSS rule

    How to sharpen an image in CSS?

    Right side border gradient only with the newer webkit gradient syntax, also which browsers support this, and how to do it in those as well?

    How to send web page in email body with css

    How to remove extra space after a colon in CSS with Sublime Text 2?

    How to align to the center a div with position absolute within a div with position relative?

    How do I set these li elements under eachother?

    How to load an onScroll background image before user scrolls to them?

    How does the CSS position on a div affects position of sibling division?

    How to make a div hide properly on hover while trying to make a gif also start on hover

    How to create a div filling the vertical available space without overlapping the containing div?

    HTML & CSS: How do I completely remove the scroll-bars on the side of
    ?

    How to align arrows using CSS or jQuery or JavaScript [closed]