WP-Table Reloaded centering, row height, column width etc

Hi Stephannie,

thanks for your comment.

I had a look at your site and it looks like that you have mixed a few things here, especially CSS, some Shortcodes and HTML.

This is not possible and is the reason for some of your issues.
I cleaned it up and simplyfied it a bit.
I also added a few things, so maybe issues are already be fixed with the new code. Please replace your complete code from the “Custom CSS” textfield with this:

.wp-table-reloaded-id-1, .wp-table-reloaded-id-2, .wp-table-reloaded-id-3, .wp-table-reloaded-id-4 {
  border: none!important;
  border-collapse: collapse!important;
  border-spacing: 0px!important;
}

.wp-table-reloaded-id-3, .wp-table-reloaded-id-4 {
  width: auto!important;
  margin: 10px auto 15px!important;
  text-align:center!important;
  vertical-align:middle!important;
}

.wp-table-reloaded-id-4 td {
  width: 150px!important;
  height: 150px!important;
}

.wp-table-reloaded td {
  background-color: #FDF5E6;
}

Please let me know, if it works.

Best wishes,
Tobias

Thanks! it works. Much more concise.

The only thing is, I’m still getting a wider space btwn table rows 2&3 compared to the other rows on the pattern page. Not sure why it’s doing that.

thank you so much!!!

Hi,

great! Good to hear that! ??

That remaining space is inserted, because you have a line-break after the HTML for the image in the second cell of the second row of that table.
If you navigate to that cell, click behind the last > character and press “Del” on your keyboard a few times, and then save your changes, the space should vanish ??

Best wishes,
Tobias

got it! I thought I’d caught all those, ugh!

thank you so, so much!

Tobias,

Like Stephanie, I want to control the height of the rows in my table but it is not working. Here is the code I put in the custom CSS box:

.wp-table-reloaded-id-2 td {
  height: 50px!important;
}

I’ve changed the height property to several different numbers but I see no change.

I’m not using the plugin’s default CSS style sheets because I need transparent cells and that was the only way I could get that.

My theme is 2010 Weaver and my site is https://www.vellgroup.com/what-we-offer/

Any idea what I am doing wrong?

Hi Matt,

you are basically “suffering” from the same behavior that Stephanie experienced:
You pasted HTML code for a form into a table cell. That HTML code however contains line breaks. And those line breaks get transformed into <br/> HTML tags, when the table is displayed. And that results in a lot of vertical space used.

So, to fix that, you will need to paste the HTML code for the form/button without any line breaks (except the ones that will be done by the browser because the textfield is to small to show everything in one line).

Does that make sense?

Best wishes,
Tobias

Tobias, many many thanks! In fact I deleted the height CSS specification figuring the elimination of the line breaks would do it alone and I was right.

Note to others: if you are unsure where the line breaks actually are, copy and paste the cell contents into notepad and you can then see where new lines occur where they don’t need to.

By the way, is there away I can get transparent background on cells without bypassing your default CSS stylesheets?

Hi,

yes, thanks for the heads up!

For the transparent background: In any case you would need to add some “Custom CSS” commands. Which one exactly depends on where the table background comes from, or whether for example your theme adds one, too (some themes do). The best thing to find out is to use “Firebug”, an extension for Firefox.

Regards,
Tobias

1. my table 1 is in page https://www.parfumio.ro/
issues:
– The table shows differently in Firefox, Opera, IE, Chrome (?!):

• in Opera it is centered (that is ok) and the column width seems to be variable but the widths for the last 4 columns should be less
  in Firefox the table is not centered (not ok) while the column widths are ok, more for the firs 2 columns and les for the last 4 columns
  in Chrome – not centered, column width is ok
  in IE – centered and the column width is ok

So, what I want is the table to be centered in all browsers and that I can control/modify the column widths the way I want to (variable for the first 2 columns and fixed for the last 4 columns.

2. my table 2 is in page https://www.parfumio.ro/shop-parfumuri/
As far as centering is concerned, the same behavior.
As far as column width, I would like it to be fixed

The point is I don’t really understand how that Custom CSS field from the Frontend Options works. I’m not sure how can you give different styles to different tables on your site.
And can you be sure it will be behave the same in all the browsers?

Other questions:
– can I change the highlight color for when hovering a row?
– can I highlight only one cell when hovering over it?
– how can I change the border color or remove the border?

By the way, congratulations for your great work on this plugin! It is THE greatest table plugin, I’ve tried using many other plugins but it was impossible to obtain a decent table, all had different faults or annoying limitations.
Besides, your plugin is a great solution for presenting a simple gallery of thumbnails or pictures on a page. Then, by using html I can link each thumbnail to a corresponding page.
In other 2 famous plugins for picture galleries I couldn’t simply link the thumbnails to different pages or the thumbnail were different in size, etc. Very annoying.
I wasn’t hoping to be able to add a decent gallery but surprinsingly a table plugin helped me. Maybe you should present this in your plugin descriprion so that people know it.

So, congratulations again for this great plugin and also for helping us all with our support issues.

1. my table 1 is in page https://www.parfumio.ro/
issues:
– The table shows differently in Firefox, Opera, IE, Chrome (?!):

• in Opera it is centered (that is ok) and the column width seems to be variable but the widths for the last 4 columns should be less
• in Firefox the table is not centered (not ok) while the column widths are ok, more for the firs 2 columns and les for the last 4 columns
• in Chrome – not centered, column width is ok
• in IE – centered and the column width is ok

So, what I want is the table to be centered in all browsers and that I can control/modify the column widths the way I want to (variable for the first 2 columns and fixed for the last 4 columns.

2. my table 2 is in page https://www.parfumio.ro/shop-parfumuri/
As far as centering is concerned, the same behavior.
As far as column width, I would like it to be fixed

The point is I don’t really understand how that Custom CSS field from the Frontend Options works. I’m not sure how can you give different styles to different tables on your site.
And can you be sure it will be behave the same in all the browsers?

Other questions:

• can I change the highlight color for when hovering a row?
• can I highlight only one cell when hovering over it?
• how can I change the border color or remove the border?

By the way, congratulations for your great work on this plugin! It is THE greatest table plugin, I’ve tried using many other plugins but it was impossible to obtain a decent table, all had different faults or annoying limitations.
Besides, your plugin is a great solution for presenting a simple gallery of thumbnails or pictures on a page. Then, by using html I can link each thumbnail to a corresponding page.
In other 2 famous plugins for picture galleries I couldn’t simply link the thumbnails to different pages or the thumbnail were different in size, etc. Very annoying.
I wasn’t hoping to be able to add a decent gallery but surprinsingly a table plugin helped me. Maybe you should present this in your plugin descriprion so that people know it.

So, congratulations again for this great plugin and also for helping us all with our support issues.

Hi,

those issues happen, because your theme also contains styling commands for tables. This makes it hard to have everything consistent for all browsers, because some of them interpret things differently.

As a start, try adding this to the “Custom CSS” textfield:

.wp-table-reloaded {
  width: 100%!important;
}

This might already fix the centering and column widths issues.

For question 2, please see my FAQ page at https://tobias.baethge.com/wordpress-plugins/wp-table-reloaded-english/faq/, especially questions “How can I change the color used for highlighting hovered rows?” and “How do I remove the borders from a table?”.

Best wishes,
Tobias

Hi Tobias

I’ve implemented that CSS immediately when you gave it to me and it worked great but I forgot to say thank you…

So, thanks a lot :)!
Now I have more than 50 tables on my blog and they are excellent, just what I needed.

Now, another question:
The CSS you gave me above, I guess it forces the width to be 100% of the page for all the tables.
But I added an exception, for example for my table 86, like this:

.wp-table-reloaded-id-86 {
width: 60%!important;
}

It is shown here https://www.parfumio.ro/ at the bottom of the page and unfortunately it’s not centered anymore.

I looked in my css stylesheet and i found some lines reffering to tables, for example:

.article table, table.article
{
border-collapse: collapse;
margin: 1px;
width:auto;
}

and some other lines related to tables:

.article table, table.article .article tr, .article th, .article td
{
background-color:Transparent;
}

.article th, .article td
{
padding: 2px;
border: solid 1px #8C9B94;
vertical-align: top;
text-align:left;
}

.article th
{
text-align:center;
vertical-align:middle;
padding: 7px;
}

I thought I should add horizontal-align:middle like this
.article table, table.article

{
border-collapse: collapse;
margin: 1px;
width:auto;
horizontal-align:middle;
}

but it didn’t work. Is there something else I can do?

I also looked in your FAQ and I added the code for removing the border like this

.wp-table-reloaded-id-86 {
border: none!important;
border-collapse: collapse!important;
border-spacing: 0px!important;
}

but it doesn’t work… :(. The border is still there.

I also wanted to align different columns of a table in different ways and I added this for table 10 (shown here https://www.parfumio.ro/chanel/):

.wp-table-reloaded-id-10 td
{
text-align: center;
}
.wp-table-reloaded-id-10 .column-1, .wp-table-reloaded-id-10 .column-2, wp-table-reloaded-id-10 .column-3
{
text-align: left;
}

and it works great.

But what if I want this to happen for all my table (with one exception)
Shouldn’t I add the following?

.wp-table-reloaded td
{
text-align: center;
}
.wp-table-reloaded .column-1, .wp-table-reloaded .column-2, wp-table-reloaded .column-3
{
text-align: left;

I did so but it didn’t work… Did I make a mistake?

(Sorry for this long long post.. )

Hi,

I’m a little bit confused by all the CSS code you posted, so I went ahead and created some code that should fix all of those issues that I understood. Can you try that code and then repeat your question for those issues that remain?

For centering the table:

.wp-table-reloaded-id-86 {
  margin: 0 auto!important;
}

For removing the borders (it is also on the td’s not just the table itself):

.wp-table-reloaded-id-86, .wp-table-reloaded-id-86 td {
  border: none!important;
  border-collapse: collapse!important;
  border-spacing: 0px!important;
}

In the code for the alignment, you forgot a . before the last .wp-table-reloaded, so:

.wp-table-reloaded td {
  text-align: center;
}
.wp-table-reloaded .column-1, .wp-table-reloaded .column-2, .wp-table-reloaded .column-3 {
  text-align: left;
}

And another thing: In your CSS, there is a line

<div style="width:100%; text-align:center;">[table id=86 /]</div>

That needs to be removed! This is HTML and a Shortcode and it can not stand in the Custom CSS!

Hi Tobias

I used the pieces of code and they worked fine.
That’s what happens when you’re not familiar with php, css and other.. acronyms :). You try different things and you screw up :). I mean that’s what I did.

Thanks a lot
Larry

Hi Tobias:

I, too, am having some trouble with cell widths not “sticking” when I make the CSS changes suggested in your FAQ. On this page https://scottsdalepopwarner.org/tackle-2/team-8/shockers-players/ I have created a simple table for a youth football team. I have specified the cell widths with the following code per your suggestion:

.wp-table-reloaded-id-4 .column-1 {
width: 150px;
}
.wp-table-reloaded-id-4 .column-2 {
width: 160px;
}
.wp-table-reloaded-id-4 .column-3 {
width: 100px;
}
.wp-table-reloaded-id-4 .column-4 {
width: 50px;
}
.wp-table-reloaded-id-4 .column-5 {
width: 60px;
}
.wp-table-reloaded-id-4 .column-3 {
text-align: center;
}
.wp-table-reloaded-id-4 .column-4 {
text-align: center;
}
.wp-table-reloaded-id-4 .column-5 {
text-align: center;
}

The centering of the text is working fine, but as you can see the widths are not as I wanted.

I am using the inFocus theme; please let me know what else you might need to help fix this.

Thank you!
Peter