Table Formatting
-
Is it possible to amend the colour of horizontal rows background colour in alternate rows in TablePress?
Also, is it possible to set a custom column width for each column?
-
Hi!
Thanks for your post and sorry for the trouble!
Yes, changing the styling and the colors is no problem! You can for example use CSS code for this, see the TablePress FAQ.
If you prefer a more visual editing, check out the Default Style Customizer feature that is part of the TablePress premium versions.
Changing column widths is possible with CSS code as well, see https://tablepress.org/faq/column-widths/
Best wishes,
TobiasThanks Tobias, is it also possible to configure the column widths via the Default Style Customizer?
Lastly, is it possible to add a watermark to a table?
Hi,
no, sorry, changing column widths in the Default Style Customizer is not possible — and would actually not really make sense: The Default Style Customizer sets the default styling for all tables at once. While this makes sense for colors, etc., tables will have different content, so that they will have or need different column widths anyways. So, for now, the best approach for setting column widths (if it’s actually necessary to override the defaults that the browser determines automatically) is to use CSS.
(I do however plan to extend the Default Style Customizer in the future, to also allow styling individual tables, where setting column widths is also one of the goals).As for the watermark: Do you mean something like a background image for the table? This is in general possible with CSS code as well.
Best wishes,
TobiasHi Tobias, thanks for the detailed response, much appreciated.
When i mention watermark i do mean a background image for the table. Do you have any guidance on the CSS code needed to achieve this?
Hi,
sure, no problem!
Adding a background to a table is not too difficult. You could e.g. add this to the “Custom CSS” text area on the “Plugin Options” screen of TablePress:
.tablepress-id-123 { background-image: url(https://example.com/your-image.png); background-repeat: no-repeat; background-position: center; background-size: 50%; }
(with the correct table ID, the image URL, and maybe some tinkering with the other parameter values). You would also have to turn off the “Alternating Row Colors” and “Row Hover Highlighting” checkboxes on the table’s “Edit” screen, or adjust those colors to be semi-transparent.
Best wishes,
TobiasHi Tobias,
I’ve tried the above CSS you suggested to display a background image but struggling to get it working. Can I confirm the following:
In this part of the CSS “.tablepress-id-123 {“
Is “tablepress-id-123” meant to be replaced with the Tabled ID or just “123”?
Thank you
Marinos
Hi,
just the 123 would have to be replaced.
If this change then still does not work, can you please post a link to the page with the table where this problem happens, so that I can take a direct look? Thanks!
Best wishes,
TobiasThanks Tobias, please see the first table on this page – https://watchmakingtools.com/test/.
Sure i’ve missed something, just can’t see what.
Hi,
thanks for the link! Please turn off the “Alternating Row Colors” and “Row Hover Highlighting” checkboxes on the table’s “Edit” screen, or adjust those colors to be semi-transparent.
You will then see the background image.
To remove the border lines (if desired), also add this CSS code:
.tablepress-id-France-Ebauche-FE-LA th, .tablepress-id-France-Ebauche-FE-LA td { border-top: none; }
Best wishes,
TobiasThank you Tobias, this now works.
Sorry to be a pain but I really want to show the alternating row colors so how do I make these semi-transparent? Also, is there a way to make the background image repeat?
Hi,
you would need to choose an “rgba” color (which has transparancy), e.g. using https://rgbacolorpicker.com/ and assign that with CSS code, via https://tablepress.org/faq/change-color-alternating-rows/
To have the image repeat, you would need to assign a different value to the
background-repeat
CSS property in the CSS above, see https://developer.mozilla.org/en-US/docs/Web/CSS/background-repeatAs we are reaching the limits of what I can offer as free support here, and or if you would like more specific suggestions, I would recommend checking out the TablePress Premium versions which also come with direct priority email support for things like this.
Best wishes,
TobiasThanks for all your help Tobias.
Hi,
sure, no problem!
Best wishes,
Tobias
- The topic ‘Table Formatting’ is closed to new replies.