[Plugin: WP-Table Reloaded] Formatting Help?

I got it! I just hadn’t tried just the right combination yet, apparently.

Here is the code that finally gave me what I wanted:

.wp-table-reloaded td {
font-family: Arial, Helvetica, Sans-serif;
font-size: 12px;
color: #000000;
text-align:center;
}

.wp-table-reloaded .column-1 {
text-align:left;
}

Hopefully that will help someone else!

Hi,

good that you figured this out by yourself already ??

Otherwise your code would pretty much have been, what I would have suggested. It is important to understand that a “.column-N” selector already stands for a “td”, so you can not have that after it, as the selector won’t match any elements on the page.

Best wishes,
Tobias

Okay, I have a different question today.

I want to highlight one column as “Best Value.” However, the code I am using seems to only affect the header row, not the whole column. Here’s what I’ve got:

.wp-table-reloaded-id-3 .column-4{
background-color: #e0eee0;
}

Doing this only changes the background on Row 1, Column 4 (which is D). The rest of the rows in that column retain the main table colors. (I tried doing the border color also and had the same result)

You can see it here: https://aclevercat.com/services/backup/

Is there some trick to getting it to recognize the whole column?

Hi digigirl,

thanks for that question!

This basically happens, because now there are several commands that want to style the same attribute for the same elements (namely the background-color for the cells in the 4th column). The browser doesn’t know which is more important, so it chooses one – in your case the “wrong” command.
However, there’s a simply solution: Just tell the browser, which command has a higher weight, i.e. is more important: This is done by adding “!important” to the code.
So, just change your code to

.wp-table-reloaded-id-3 .column-4{
 background-color: #e0eee0!important;
}

and the 4th column will be highlighted ??

Best wishes,
Tobias

Ah, brilliant! Thanks.

I’m gonna get all this CSS stuff down eventually.

I do appreciate your help!

Donation on the way.

Hi,

no problem, you’re welcome. Good to hear that it works!
And thanks for your willingness to donate! I really appreciate that! ??

Best wishes,
Tobias

Hy!
i just add the following code to the CSS on the “Plugin Options”:

.wp-table-reloaded td {
text-align:center;
vertical-align:middle;
}

And the the text is not aligned to the center horizontally and vertically.
please help

Hi,

very likely there is another CSS command somewhere that is resetting the CSS, i.e. in your theme.

Please provide the link to the page with the table, so that I can take a look. I’ll then be able to tell you, how you’ll need to adjust the CSS to take effect.

Best wishes,
Tobias

https://www.offroad-lobor.hr/?page_id=487

thanks for helping me

Hi,

thanks for the link.

As I had thought, there’s some CSS in your theme conflicting with the table CSS. It is easy to fix however, you just need to add the “!important”, so that the table CSS gets a higher priority.

Please try this CSS:

.wp-table-reloaded td {
  text-align:center!important;
  vertical-align:middle!important;
}

(Of course you can also use .wp-table-reloaded-id-5 as on your page.)

Best wishes,
Tobias

thanks, now it works, but only when the first row of table is not the table head, when it is – then first row is aligned to the left (i am from croatia, sory about my bad english)

Hi,

yes, that’s the case because of the selectors, which only includes td elements, while the head is a th element.

Easy to fix with another adjustment in the CSS. Please try:

.wp-table-reloaded td, .wp-table-reloaded th {
  text-align:center!important;
  vertical-align:middle!important;
}

Best wishes,
Tobias

problem solved, thanks again

Tobias.
Updated column widths in custom CSS for a single table, but table wasnt formatting according to the custom CSS. I realised that this was caused by the long URLs listed in the table not wrapping. I used a shortened link text and snipURL, however would still like to show the unlinked full text of a URL. Is there a way to do this?

Hi,

I guess I don’t yet really understand what you want to achieve ??
Long texts in cells will obviously lead to larger cells (if they don’t have spaces or linebreaks in them). So you want to use shorter links but also the full text?

Can you maybe provide the URL to the page with your table? Maybe also, a screenshot could help describe what you want to do?

Best wishes,
Tobias