How to select the by CSS?


Tags: css,jsf,jsf-2,datatable,primefaces

Problem :

First I was using <h:dataTable> and I was OK with this but after then I needed some more functionality, So I started using Primefaces and used its <p:dataTable>. Everything is going fine but the CSS that I applied on tables stopped woking. Then I found that <p:dataTable> is first creating a <div> and then inside the <div>, it is creating a <table>.

 <div id="tcform:tclist" .......>
       <table role="grid">....</table>
 </div>

But <h:dataTable> creates just HTML <table>. Now I want to know how can I get table's id or is there any solution that I can access that table. I also want to know that Why <h:dataTable> and <p:dataTable> differs from each other.



Solution :

If you want to style tables in a generic manner, just change the CSS selectors accordingly. The <table> of <p:dataTable> is selectable by the ui-datatable class.

.ui-datatable td {
    background: pink;
}

If you want to style only a specific table in a specific manner, rather give it a classname so that you can select by the classname instead of by ID.

E.g.

<p:dataTable styleClass="foo">

is overrideable by .ui-datatable.foo {}. E.g.

.ui-datatable.foo td {
    background: hotpink;
}

    CSS Howto..

    When I say position:fixed, how do I tell mobile browsers I mean it?

    How to create a speech bubble with css only

    Span tag is shown as text in Drupal Bootstrap subtheme

    How to keep an image and text (vmax font) aligned when resizing browser?

    Dialogs are showing at the bottom of the page

    How much media queries?

    How do I assign an external CSS file to a javascript-constructed SVG object?

    CSS : How to give different spacers within the same navigation menu

    IBM Worklight - How to disable Native device features?

    How can I differentiate unordered lists in CSS?

    How can I include a HTML-encoded “content:” character in CSS? [duplicate]

    How to load local copy of bootstrap css when the cdn server is down?

    how to locate submenu elements (xpath, className or css locators)

    how to add css background color for div tag

    How to add “pause” button in this jquery slider?

    how to CSS select all th cells, except the last one on IE7/8?

    How can I set the System.Web.Optimization bundler to correctly transform ISO unicode

    How to set CSS attributes relative to a parent node?

    How to make a CSS composite scalable

    How to center HTML content

    how do I make overflowing and float positioned elements stay all on one line?

    Boostrap: How to “stick” a button over an image when re-sizing

    How to make scrollbars appear when DIV doesn't have enough room but keep DIV centered?

    how to make html email look exactly the same as previewed just in browser?

    How to start different elements on different keyframes of an animation in CSS

    How to customize the look and feel of rich faces tab panel

    How to write Hover property with CSS for a piece wih :after and :before properties?

    How to change CSS element of data-pid using jquery

    Working with a css3 key frame slide effect but cant figure out how to configure correctly.. Fiddle included

    How come one of my columns in bootstrap is not functioning properly?