[Plugin: WP-Table Reloaded] Modify columns width settings for all tables globally

Hi,

yes, to globally change a column’s width for all tables, just use the selector .wp-table-reloaded instead of .wp-table-reloaded-id-N.

Best wishes,
Tobias

Hi,

you will need to use the selector as part of some additional “Custom CSS” code for the column widths in the corresponding textarea on the “Plugin Options” screen of WP-Table Reloaded.

However, from my experience, just changing a column width will usually not remedy the problem of a table overlapping into the sidebar. This usually has other reasons. If you post a link to your table, I can take a look to find a fix, if you want.

Regards,
Tobias

Hi,

thanks for the link.

As I had thought, the reason for the overlapping is not easily solvable by just adding width CSS.
The reason, why your table is so why is the content in it. The content you inserted simply requires this table width. Specifically, the “trouble maker” is the “URL” column. You can see this in the “Cal Auto Rental” row: The URL you inserted does not give the browser any choices to insert a line break (in the row below that, where the URL has a - in it, the browser can however find a place to insert a line break). This forces the URL column to this long width. And with that, the entire table becomes very wide. Now, this width, which is required by the content of the cell can only be reduced by shortening the content of the cell. In the case of those URLs, I believe that you don’t actually need them. Just make the Company column clickable links, using the “Insert Link” button on the “Edit” screen. After that, your table will be much smaller, because you no longer have that URL column.
So, that would be solution I recommend.

As a temporary workaround, you could also try this:
Remove the current “Custom CSS” that you have and instead add this:

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

This code will shrink the inner white space of the table cells which also will make your table smaller and fix the overlapping.

Best wishes,
Tobias

Hi,

the code you inserted is not working, because you removed the !important keyword from it. That is however necessary to give the code a higher priority over existing code from your theme. Please try again with that exact code.

The solution in your other table is similar: It simply reduces the width of the cells by making the font smaller. The content in the cells will then of course require less space and the table becomes smaller.
You can achieve the same in WP-Table Reloaded as well, just add this “Custom CSS”:

.wp-table-reloaded td,
.wp-table-reloaded th {
  font-size: 8pt!important;
}

Regards,
Tobias

Hi,

For the arrows, you need to include the plugin’s default CSS. For that, make sure that the “Default CSS” checkbox on the “Plugin Options” screen is checked. That way, the plugin will load the necessary CSS code to show the arrows.

And: Instead of using the (old) Tablesorter JavaScript library for sorting, I recommend switching to the “DataTables” library. Not only does it offer more features, it also is faster and still maintained and actively developed.

Best wishes,
Tobias

Hi,

ok, for some reason, there seems to be a JavaScript conflict somewhere with the DataTables library. Unfortunately, I have no idea where that is, so I guess, you should switch back to Tablesorter, because that worked, right?

For the overlapping, please try adding the “Custom CSS” from above again, but leave the !important keyword where it is:

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

Best wishes,
Tobias

Hi,

great! 🙂
And thank you very much for your donation, that really is very nice of you!

Best wishes,
Tobias