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 write regex to extract specific key format and value from CSS file?

    CSS media type: How to load CSS for mobile?

    how to show text in a button with css

    How to set auto-margin boxes in flexible-width design using CSS?

    How are these check-marks being drawn?

    How to use a different stylesheet for iphone or android?

    How to serve static files for local development in Django 1.4

    How to specify the system’s default serif and sans-serif font-family?

    How to get css property value in pure javascript

    How to add external css into html

    How to left-align the text in a Bootstrap accordion

    How to make div disappear when clicking outside?

    How to reference an embedded image from CSS?

    How to add visual indicator of focus for Radio Button for Firefox

    How to write CSS3 animations with JavaScript objects?

    How to dynamically change element alignment?

    How to make css two borders?

    How can I easily copy the whole CSS file from a website?

    How to scale div using css animation in javascript

    How can I display an alert with the position of the element that was clicked?

    How to shorten blockquote to wrap around floated div?

    How to make combination of images responsive?

    how to override min-width

    How do i set the HTML tag's “background” property with JS, still allowing other properties from a CSS file to be unchanged?

    How to make CSS scroll panel for custom purposes?

    How to blur only background and not content in Ionic/CSS

    How can I use CSS styling in my GTK# application?

    How to draw a line with css and show text or image on it

    How to add an image toward the right of a textbox and the text not overflowing to it

    How to add custom CSS class name in PHP?