WP-Table Reloaded, Coll Width & Table Centering

Hi,

thanks for your comment. I’m sorry that you are having such problems with the styling of the table. Unfortunately it is not easy to give always working advice, as there are so many factors influencing this (theme, plugin CSS, …)

I had a look at your page and here’s some revised code that should center the table on the page:

<div style="width: 50%; margin: 0px auto!important;">[table id=1 column_widths="50%|50%" /]</div>

What’s now left are the column widths. For that, I’d ask you to add the code
"bAutoWidth": false
to the “Custom Commands” textfield in the “DataTables JavaScript Features” section on the “Edit” screen of your table.
(This is necessary to tell DataTables to not calculate and use its own
column widths, but to adhere to the ones you set.)

To make individual words in your table bold, it would be the easiest to just use HTML for them: Simply wrap them in a <strong> tag: <strong>your word</strong>

Hope this helps ??

Best wishes,
Tobias

Hi,

oh, just saw that I forgot about the question with the large empty space below the table. That’s also added by DataTables, to get a better layout for the pagination.
Now, the easy fix for you would be (as you seem to have disabled all of the DataTables features anyway), to disable the use of the library for that table (there’s a checkbox for that in the “Table Styling” section.

This will remove the space and will actually also fix the issue with the column widths, so that you would not have to add that custom command I mentioned.

Best wishes,
Tobias

Thanks for the help

Progress is being made but still a bug or so.

Good – control of the column widths works, the space below the table went away. (I had most things turned off since the table is just information that is not visitor sortable) But the table is right justified to the center of the Post with 100% table width is half the Post width.

I can center the Test Table 1 title with HTML tags in the title and it centers on the total width of the Post. Your suggestion of using HTML tags inside the table for bold works (also for the Table Description) – thanks for that one –

This is your suggested code I call the table with:

<div style=”width: 50%; margin: 0px auto ! important;”>[table id=1 column_widths=”50%|50%” /]</div>

I did try a few different things but no luck.

Yes I know that css can mess up your best efforts, and produce strange interactions, I pasted a plain HTML table into the Post the other day and 3 different Themes and three way different end results on how the table was displayed.

Now that I can control the individual columns and format Bold Italic words mean that I can use this for information on Marine Radio usage.

It would still be nice to center the whole table since it looks nicer.

https://captnmike.com/?p=1398

Thanks again for any help.

Hi,

good that we are making progress ??

The remaining issue is actually my fault, as I forgot about a tiny thing you mentioned.

You still have CSS in effect:

.wp-table-reloaded-id-1 {
  width: 50%;
}

While DataTables was still activated for that table, this CSS was not used. Now, that DataTables is deactivted, it suddenly is used (which is what I forgot about.
So, if you remove that CSS again, everything should be as you want it ??

Best wishes,
Tobias

Works GREAT!!

The down side of me not being real familiar with css and overlooking the cascade effect.

Thanks for the help

The test link above has been deleted, the link below is to the finished tables.

https://captnmike.com/?p=1145