CSS FOR Background color in column with merged cells (rowspan)

Hi,

thanks for your question, and sorry for the trouble.

Yes, this is possible with some “Custom CSS” code. To find that code, I’d however need to take a direct look at the table with the merged alls, and a more detailed explanation of how exactly you want them to look like. Could you therefore please post a link? Thanks!

Regards,
Tobias

Hi Tobias,

Please see https://www.hkptu.org/medical/western/?page_id=5392

I want the effect of table 64 but with the alternate row with different colors.

Table 62 –

Alternate color rows ON,
Use Data Tables OFF
This makes the alternative color rows working.

Table 64 –
Alternate color rows also ON,
Use Data Tables ON (Use DataTables: Use the following features of the DataTables JavaScript library with this table:… In fact I do not check any features under this)
If I turn this on, the first column background color is what I want but the alternative row color does not work.

Relevant Custom CSS I used :
/************************Debug**********************************/

/**************** Column 1 background color**********************/
.tablepress-id-62 .column-1,
.tablepress-id-64 .column-1 {
background-color: #39f;
}

Thanks in advance.

David

Hi David,

thanks for the link and for the explanation!

The problem here is that the “Use DataTables” checkbox is checked for table 64. That tables uses combined cells, which is not supported by the DataTables JavaScript library. The library then runs in to a JavaScript error, and one consequence of that is that the alternating row colors are broken.
So, please uncheck the “Use DataTables” checkbox. As you have uncheck the individual features anyway, there’s no harm in turning it off entirely.
That will then restore the alternating row colors.

Regards,
Tobias

Yes that is what I have done for Table 62 but the first column do not have the color I want. It only have the left upper most cell got the background color I want. I want the whole column with the background color.

Thanks.

Hi,

ah, thanks for the clarification.

Then please turn off the “Use DataTables” for table 64 and change this “Custom CSS”

.tablepress-id-62 .column-1,
.tablepress-id-64 .column-1 {
	background-color: #39f;
}

to

.tablepress-id-62 .column-1,
.tablepress-id-64 .column-1 {
	background-color: #39f !important;
}

Regards,
Tobias

Hi Tobias,

Did it, but no luck.

Regards,
David

Hi David,

did you really make that change to the “Custom CSS”? I can’t see the change in the CSS code, so are you sure that you clicked “Save”?

Regards,
Tobias

Oops !! It worked.

What happened :

I have checked the box Use a file for storing and loading the “Custom CSS” code. (recommended)

I edited the tablepress-custom.css file and uploaded via the ftp. And I thought it was done. After seeing your message, I went to the WP Admin panel , Tablepress section :

I have also checked the box before Load these “Custom CSS” commands to influence the table styling: ( I used this method earlier)

And I found out that the change was not there, so I edited the section and saved. And it worked.

What should be the proper way if I want to use a separate file to store the custom CSS ?

Thanks
David

Hi David,

great to hear that it worked now! ??

Basically, you should only ever edit the “Custom CSS” via that textfield on the “Plugin Options” screen. That will then automatically update the file. There’s no need to manually edit that CSS file on the server via FTP.

Regards,
Tobias

Thanks a lot.

Hi Tobias,

Just want to follow on this. In the plug-in option, it said it is recommended to save the custom css in a separate file.

I found this file in the wp/content/ directory. Editing this file in an editor like Notepad++ is much easier.

Is it possible to do that ?

Thanks
David

Hi David,

that “recommended” means that this method is recommended over writing out the CSS code into an inline style in every page.
TablePress will do everything that’s necessary for this out of the box, so that you won’t have to mess with FTP clients or text editors.

If you really prefer a text editor for editing the CSS code, still don’t directly edit the file please, but go to the “Plugin Options” screen, copy the current CSS code from the text field, paste it into the text editor, make the desired modifications, and paste the modified code back into the textfield on the “Plugin Options” screen.

Only with this method, it is ensured that the minified versions of the CSS files are created correctly.

(The next version of TablePress will no longer have the “Use a file for storing and loading the “Custom CSS” code.” by the way. It will just assume that this is set, as the underlying requirements are fulfilled on most servers.)

Regards,
Tobias

Got it. Thanks !

Hi,

alright ?? I know, the CSS management is a bit confusing, so the next version should indeed make this easier by having less clutter and options on the “Plugin Options” screen.

Best wishes,
Tobias