[Plugin: WP-Table Reloaded] Table Width Issue

Hi,

thanks for your question.

Technically, there’s no “minimum table width” by WP-Table Reloaded. The default value is to expand the table to the available content width.
As you have already set the column widths, you might just need something like this, to stop the table from getting the full width:

.wp-table-reloaded-id-5 {
  width: auto!important;
}

To place an image next to table, you’ll have to make them “floating”. That’s

.wp-table-reloaded-id-5 {
  float: left;
}

The image should be fine already.

Regards,
Tobias

so if I use:

.wp-table-reloaded-id-5 {
  width: auto!important;
}

Then the table will have a maximum width size of all the column widths put together? If so then this will, be all I need. I was hoping there was a way to set a max width to a total table. Being able to float it left or right will resolve any issues I may have with formating.
Thanks for the help.

Hi,

yes, basically that’s how it works. A width value of “auto” makes it easier to set the widths on the columns. You can of course also try to set a width on the table, like

.wp-table-reloaded-id-5 {
  width: 300px !important;
}

Depending on the circumstances, this can make it harder to change individual column widths though.

Best wishes,
Tobias

Ok so I thought I had this figured out… but apparently not.

This is what ive got.

.wp-table-reloaded-id-driverprofile, .wp-table-reloaded-id-driverprofile td, .wp-table-reloaded-id-driverprofile th {
  border: none!important;
  border-collapse: collapse!important;
  border-spacing: 0px!important;
}
.wp-table-reloaded-id-driverprofile {
  float: left;
  width: auto!important;
}
.wp-table-reloaded-id-driverprofile .column-1 {
  width: 50px;
  text-align: left;
  vertical-align: center;
  padding:5px;
}
.wp-table-reloaded-id-driverprofile .column-2 {
  width: 100px;
  text-align: left;
  vertical-align: center;
  padding:5px;
}

I’ve got that same code set on two pages using the extra class of ‘driverprofile’

https://mowersport.com/?page_id=301
https://mowersport.com/?page_id=128

But both pages render different. Any ideas where I’m going wrong.
The Float doesnt work the way you described, and the max width doesnt seem to either. And I cant get the boarders to go away either. Do I have some dumb typo somewhere?

Where am I going wrong.

Ok So I reread this thread and tried

.wp-table-reloaded-id-driverprofile .column-1 {
  width: 50px !important;
  text-align: left;
  vertical-align: center;
  padding:5px;
}
.wp-table-reloaded-id-driverprofile .column-2 {
  width: 100px !important;
  text-align: left;
  vertical-align: center;
  padding:5px;
}

IE moving the width !important thing into the column areas, but that didnt seem to change anything.

Hi,

yes, this is just a problem with the “Extra CSS classes”.
In the CSS code, you will need to use the exact same word as you entered there.
Currently, the “Extra CSS class” field is set to “driverprofile”, while in the CSS code you use “wp-table-reloaded-id-driverprofile”.
I recommend to use “wp-table-reloaded-driverprofile” in both places (without the “-id” part, but with “wp-table-reloaded-“).

Regards,
Tobias

got it. Thanks a ton!
When I mess it up again in a few months… i’ll be back. ??
until then you can mark this resolved.

Hi,

very nice! Thanks for the confirmation that this did the trick ??

Best wishes,
Tobias