WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] WP-Table Reloaded, Coll Width & Table Centering (7 posts)

  1. Saildude
    Member
    Posted 4 years ago #

    I am trying to make a table using WP-Table Reloaded.

    I want the table to be 50% of the Post Width with two columns @ 50% each of table width and the entire table centered on the page. There is also a hanging line of text way down the Post that will mess up my intended use (multiple tables in post)

    css code entered in the Plug-in options:

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

    Table Call in Post - entered with HTML editor:

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

    Link to Post: http://captnmike.com/?p=1398

    I cut and pasted from the Plug-in web site - I did try changing and retyping the Quotes for the 50% part as I saw an issue with that.

    I think I have done things correctly. Paged through 250 forum posts.

    What went wrong?

    Thanks for any help.

    PS - can Individual words be made bold in the table?

  2. TobiasBg
    Member
    Posted 4 years ago #

    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

  3. TobiasBg
    Member
    Posted 4 years ago #

    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

  4. Saildude
    Member
    Posted 4 years ago #

    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.

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

    Thanks again for any help.

  5. TobiasBg
    Member
    Posted 4 years ago #

    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

  6. Saildude
    Member
    Posted 4 years ago #

    Works GREAT!!

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

    Thanks for the help

  7. Saildude
    Member
    Posted 4 years ago #

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

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

Topic Closed

This topic has been closed to new replies.

About this Topic