Hi,
you will also need to add a little bit of “Custom CSS” on the “Plugin Options” screen. This is, because the tables in your theme are currently expanded to full page width.
That necessary code is
.wp-table-reloaded {
width: auto!important;
}
After that, the table widths should be respected.
You might also want to think about deactivating the DataTables JavaScript library on the “Plugin Options” screen, as it likely is not useful for your tables.
Best wishes,
Tobias
That worked great. Now, how can I get multiple tables on one row? And can I modify the size of the header? It seems a little large now for the table.
Thanks so much!
Hi,
to reduce the size of the table names, please use this “Custom CSS”:
.wp-table-reloaded-table-name {
font-size: 14px!important;
}
Additionally, it seems that all of your tables are in bold print. This comes from the fact that for some reason, the Shortcodes ([table id=123 /]) on your page are in bold print.
I recommend to remove that boldness. To do that, please edit your page, and select the “HTML editor” instead of the “Visual editor” in the top right corner of the editor text field. You will then see things like
<strong>[table id=123 /]</strong>
Please try cleaning that up to just the Shortcode
[table id=123 /]
Now, the problem of putting tables next to each other. This is actually not trivial and requires more knowledge on HTML code.
What you need to do is to use “containers” that surround a table name and the table and which can then be positioned more easily.
As a start, please try this code (which should put two tables next to each other – untested). Put that into your page, while using the “HTML editor” again.
<div style="width: 50%; float: left;">[table id=1 /]</div>
<div style="width: 50%; float: right;">[table id=2 /]</div>
Best wishes,
Tobias
Tobias, thanks again. The shortcode is all cleaned up. No more boldness. I’m not getting the other part to work, as when I put the <div style="width: 50%; float: left;">[table id=1 /]</div>
into the HTML section, it shows the <div between the tables and doesn’t bring them together.
Maybe I am putting it in the wrong place. Do I put it above the [table id=1 /] or after it? or in between the [ ]?
Hi,
no, actually you replace your existing Shortcode with that new code. Basically this is the same as before with the bold font tags, only that now your Shortcode is not wrapped in <strong> tags but in those new <div> tags.
Do you know what I mean?
Regards,
Tobias
Tobias, thank you for your time and expertise and patience! I got it to work great, and even reduced the space down to 33% instead of 50% and it looks just like I wanted it to. Many many thanks!
Kirsten
Hi Kirsten,
great to hear that, it really looks nice!
Best wishes,
Tobias
