Issues with centering the table AND header

  • Resolved meijin2k

    (@meijin2k)


    2 years, 6 months ago

    So, I will say at the outset that I know just enough about WordPress to be dangerous. So, apologies in advance if I am missing something simple.

    I only do very basic things with Tablepress (just found this plugin a week or so ago) and then use the shortcode to put it on a page.

    The problem I am having with this is that I would like to have the table either centered or take up the width of, I guess, “the container”. I found the following in a search here and added it:

    .dataTables_wrapper .tablepress {
  margin: 0 auto 1em !important;
}
.tablepress {
  width: auto;
}

    This centers the table, but the header is offset to the left. Could not find anything to fix that. But what I noticed that is interesting is that when I refresh the page, for a very brief moment or two, the table does take up the full width and the header is correct. Then it “breaks”. Also, when I “untick” the option that says the first row is the header, it will then look spot on to what I am trying to do.

    I know where to put CSS, but not how to figure out all of the correct CSS to do things. If anyone could help me with this, I would greatly appreciate it.

    Thanks!

    Mike

    The page I need help with: [log in to see the link]

Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Author Tobias B?thge

    (@tobiasbg)

    Hi,

    thanks for your post, and sorry for the trouble.

    It seems that the “Table Head” checkbox is turned off right now, for the tables on the page from your link. Can you please turn that checkbox on, so that I can see the issue? Thanks!

    Regards,
    Tobias

    Thread Starter meijin2k

    (@meijin2k)

    Oops! Sorry about that!

    It is back on and the issue is now readily apparent.

    Thank you for the speedy response!

    Plugin Author Tobias B?thge

    (@tobiasbg)

    Hi,

    thanks for that! From what I can see, you are suffering from a problem that is related to the Horizontal Scrolling. On some sites, this feature is having trouble properly calculating the column widths, which can lead to this weird behavior.
    My recommended solution is to use this CSS code (which is that other option that you mention, taking the width of “the container”):

    .tablepress {
  width: 100% !important;
}

    Can you please try that?

    Note that I recommend to add this to the “Custom CSS” textarea on the “Plugin Options” screen of TablePress, and not into some other plugin’s/theme’s “Custom CSS” field (which you seem to have done here). It won’t make a difference with this particular CSS, but might for other CSS, which is why I recommend it like that.

    Regards,
    Tobias

    Thread Starter meijin2k

    (@meijin2k)

    Bingo! That seems to have done the trick!

    Thank you so much for your help and assistance…also for the great little plugin!

    Have a great day sir!

    Plugin Author Tobias B?thge

    (@tobiasbg)

    Hi,

    no problem, you are very welcome! ?? Good to hear that this helped!

    Best wishes,
    Tobias
    ?
    P.S.: In case you haven’t, please rate TablePress here in the plugin directory. Thanks!

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Issues with centering the table AND header’ is closed to new replies.