Hi there,

I've tried searching for the answer to this question, but cannot find it, so apologies if this has already been answered elsewhere

Basically, I'd like to know if it's possible to alter the css for the JTableSorter - i.e the TH and TR (for zebra stripes).

In your example (smart.ari-soft.com/ari-jtablesorter.html) the TH is coloured green (blue once clicked), and the stripes white and purple.

I found a great answer to use css to style the JDataTable by using ".dataTables_wrapper" styles; is there something similar for JTableSorter?

Thanks

Hello,

You can use the following CSS rules for ARI JTableSorter plugin:



Regards,
ARI Soft

Thank you so much for the quick reply!

A few further questions:

1. The style for the "odd" rows doesn't seem to work. See this page for example: www.dip.qld.gov.au/structural-reform/rationale-and-maps.html

I've set the color to red but it still shows up purple.

Code:

/* CSS rules for each odd row */
table.tablesorter TR.odd TD {
background-color: red;
}

2. Can I also alter the font type and size?

3. Can I alter the colour of the TH for a column set to be "notSortableCols", as per the 2nd column ("Type and size") in the above example?

Thanks again

About questions:

1. Sorry, use the following CSS rule:



2. Yes, you can use for this purpose 'font-size' and ' font-family' CSS properties.

3. Yes, set color for all TH in table and override sortable columns if needed. For example, use the following CSS rule:



Regards,
ARI Soft

Thanks again for your help - I'm getting there

I'm still having an issue with the background colour of the odd rows - the font size and type have changed successfully but the colour remains purple. I'm also unable to affect the non-sortable TH cell background or font. Here is my code:

/* CSS rules for each even row */
table.tablesorter TR.even TD {
background-color: #fafafa;
font-size: 10pt;
font-family: arial;
}

/* CSS rules for each odd row */
TABLE.tablesorter tbody TR.odd TD {
background-color: #f6f6f6;
font-size: 10pt;
font-family: arial;
}

table.tablesorter tbody td {
background-color: red;
font-size: 10pt;
font-family: arial;
}

/* CSS rules for sorting columns */
table.tablesorter thead tr .header
{
background-color: #dfdfdf;
font-size: 10pt;
font-family: arial;
}

/* CSS rules for active sorting column */
table.tablesorter thead tr .headerSortDown,
table.tablesorter thead tr .headerSortUp
{
background-color: #8dbdd8;
}

TABLE.tablesorter THEAD TR TH
{
background-color: #dfdfdf;
font-size: 10pt;
font-family: arial;
}

You can see the page here: www.dip.qld.gov.au/structural-reform/rationale-and-maps.html

Hello,

Add !important attribute to CSS properties. In other words, use the following syntax:



Regards,
ARI Soft