Css Style will be overwritten?

hawkmaster

Hello

I have a CSS style for my table to format the text in header left:

#ctdata th { 
    text-align: left;
    background:#6CF;
}

The table is created like this:

oTable = $("#ctdata").dataTable({
            "sAjaxSource": ajaxSourcePhp,
            "sAjaxDataProp": "",
            "autoWidth": false,
            "aaSorting": [[ 0, "asc" ]],
            "scrollY":        "200px",
                   "scrollCollapse": true,
                   "paging":         false,
            
            "pagingType": "simple",       
            "bDestroy": true,
            "language": {
                "decimal": ",",
                "thousands": "."
            },

When the page is loaded the css style will be overwritten.
Heading of table is always middle and white background.

Why this?

thanks
regards
Hawk

vogomatix

Missing a # sign in your css?

#ctdata th {
...
}

If this is not an issue, read up on CSS specificity, which determines which rules take precedence. You can google the term, or there is a helpful calculator here

allan

The web inspector tools built into your browser are also excellent for determining which rule has been applied. Simply right click and "Inspect element".

Allan

hawkmaster

Thanks for help.
no the css was correct with # (do not know why there is the content "../forum/search.." in my post?)
this does not take effect

ctdata th {

text-align: left;

}

But I checked with Firebug and saw that the head for scrolling tables are different nad i tried css with:
.dataTables_scrollHead {
text-align: left;
}

and this works now :-)

allan

do not know why there is the content "../forum/search.." in my post?

Sorry - bug in the forum software that I'll need to take a look at sometime.

Allan