[Plugin: WP-Table Reloaded] column CSS style

Hi,

thanks for your question.

When using the .column-N selector, you must not use an additional td in the CSS, as the column is a td already, while the .row-N belongs to a tr, so the td is necessary ??

This will work:

.wp-table-reloaded-id-1 .column-1 {
  font-size: medium;
  font-weight: bold;
}

Best wishes,
Tobias

Tobias,

I’ve just started using your plugin and can’t get the column widths or text size to change with the custom .css.

When I try

.wp-table-reloaded-id-1 .column-2 {
font-size: large;
font-weight: bold;
}

in the Custom CSS Class area for my table, like you show above, my text size doesn’t change. I can’t figure out why I can’t get the text size, or column width to change. Can you please help me troubleshoot this?

Hi,

can you please provide a link to the page with your table? That would make it a lot easier to find out what’s wrong.

Thanks!
Tobias

Thanks Tobias. The link to the page is:

https://www.tuesdaynighttwilights.com/sponsors-2

I just published it as password protected. The password is table.

Right now, I have in Table Styling Options, Custom CSS Class:

.wp-table-reloaded-id-1 .column-1 {
width: 600px;
}

and in DataTables JavaScript Features, Custom Commands:

“bAutoWidth”: false

as an example of making the column width wider than the image logo. It seems like whatever I do, I can’t override the autowidth, or get any .css commands to work.

Thanks a bunch for the help.

Best regards,
Glenn

Hi Glenn,

thanks for the link and for the explanation.

There’s a tiny piece of misunderstanding here:

Your CSS code (which is perfectly ok) needs to go into the “Custom CSS” textfield on the “Plugin Options” screen, and not into the “Custom CSS class” field on the “Edit” screen.

Once you move it, the CSS, together with the bAutoWidth code, which is correct, should work as expected.

Regards,
Tobias

Awesome Tobias!

Simple, and of course, it works.

I kept beating my head against the wall, and knew I was doing something wrong.

Thank you so much for an awesome plugin that will make my life so much easier. I’ll have lots of use for it once I get all the nuances figured out.

Also, thanks for making life so much easier for nyoobs, non-html coding types like myself, for whom html, .css, and .php most often looks like an indecipherable foreign language.

Dankesch?n,
Glenn

Hi Glenn,

great to hear that you got it to work!

And thanks for your kind words, that really nice to hear!

Best wishes,
Tobias

ahh the answer to my question on the transparency lies here, i believe.

Hi,

yes, if you have been pasting the code from the other post into the “Custom CSS class” field, this is your answer ??

Regards,
Tobias

Hi Tobias,

If i insert a picture, then have in the cell before and after picture 19 px space. I would like remove this space, and i would like to put the picture center in cell.
Where i change the table cell options?

This is link, the table is in this site, after an other table.
https://www.trademagazin.hu/2011-es-programok-vasarok/

Thank You!
Richard

Sorry for my bad english

Hi,

this space is coming from your theme’s CSS.

To remove it, please add the following to the “Custom CSS” textarea on the “Plugin Options” screen:

.wp-table-reloaded img {
  margin:0!important;
}

To center the images, you can use this CSS, which will center the text in the first column:

.wp-table-reloaded-id-2 .column-1 {
  text-align: center!important;
}

Regards,
Tobias

Thobias,

You are a Superman! :-)))
End of problem.
Thank You very much!

Richard

Hi Richard,

you are welcome, no problem! ??

Best wishes,
Tobias

alrite.. i thought I would stop head banging but yea i still have to, apparently.

Basically I want to reduce my column width and cell spacing but im not able to. No matter what I try, it does not work! Obviously i’m doing something wrong.. but this is what i’ve done till now:

Custom Commands: “bAutoWidth”: false

Custom CSS (plugin option page) :

.wp-table-reloaded-1 .column-1 {
width: 10px;

(yes, i did read the documentation.. copy pasted things and changed the values after refreshing umpteen no. of times.. but to no avail)

tried many variations to it.. it still wudnt work.. my entire table is just intact. No matter what value I add to the width. I wanna reduce my entire column and rows (i dont know what u call.. width or cell spacing? or maybe cell padding) spacing thereby shortening the entire table.

https://i53.tinypic.com/33dfub6.jpg

So you see those extra spacing around all columns? and rows also.. Basically I just wanna shorten everything.

Help please!

Hi,

judging from your screenshot, you might need the following code, which will remove extra space around images in tables (your checkmarks), and it will reduce the space between the text and the cell border (“padding” in HTML terms):

.wp-table-reloaded-id-1 img {
  margin:0!important;
}

.wp-table-reloaded-id-1 td,
.wp-table-reloaded-id-1 th {
  padding:4px!important;
}

So, actually you don’t have to mess with the column widths, but you will make the content in the cells (which includes that padding) smaller.

If this does not work, can you please provide a link to your table, as it is easier to help than, because I can see the actual code – compared to just looking at a screenshot.

Regards,
Tobias