WordPress.org

Ready to get started?Download WordPress

Forums

TablePress
[resolved] Center table on page (16 posts)

  1. domainplanet
    Member
    Posted 1 year ago #

    This sounds really easy but I can see how you centre a table horizontally on a page?

    http://wordpress.org/extend/plugins/tablepress/

  2. TobiasBg
    Member
    Plugin Author

    Posted 1 year ago #

    Hi,

    thanks for your question.

    This is really easy and the answer to the question is in the TablePress FAQ at http://tablepress.org/faq/

    If that does not help, please post a link to the page with your table.

    Thanks,
    Tobias

  3. domainplanet
    Member
    Posted 1 year ago #

    Ah, how embarrassing - I had actually seen it in the FAQ about 10 hrs ago, tried it, and it hadn't worked for some reason, so forgot about it. I blame the flu I have ;-)

    Thanks - that code works perfectly now!

  4. TobiasBg
    Member
    Plugin Author

    Posted 1 year ago #

    Hi,

    great to hear that! Thanks for the confirmation!

    Best wishes and get well soon!
    Tobias

    P.S.: In case you haven't, please rate TablePress here in the plugin directory. Thanks!

  5. rayfellers
    Member
    Posted 1 year ago #

    Having the same problem. My table won't center. I added this code to the Plugin Options.

    .tablepress-id-9 {
    	width: auto;
    	margin: 0 auto 1em;
    }
    
    .tablepress-id-9,
    .tablepress-id-9 tr,
    .tablepress-id-9 tbody td,
    .tablepress-id-9 thead th,
    .tablepress-id-9 tfoot th {
    	border: none;
    }

    But the table remains left aligned.

  6. TobiasBg
    Member
    Plugin Author

    Posted 1 year ago #

    Hi,

    the code looks correct, so I can only assume that there's something in the theme interfering. Could you therefore please post the link to the page with this table? Thanks!

    Regards,
    Tobias

  7. rayfellers
    Member
    Posted 1 year ago #

    Hi Tobias. First thanks for creating this plugin. Once I learn how to use it, the plugin will be a big help.

    The page giving me the problem is reference test.

    This is a minimal theme created using Artisteer.

  8. TobiasBg
    Member
    Plugin Author

    Posted 1 year ago #

    Hi,

    thanks for the link! Unfortunately, it is not working for me, as I only get a "Not found" error :-( Is this really a "published" page?

    Regards,
    Tobias

  9. rayfellers
    Member
    Posted 1 year ago #

    Oops. Sorry about that. Try this page.

  10. TobiasBg
    Member
    Plugin Author

    Posted 1 year ago #

    Hi,

    thanks for the new link. That worked :-)

    Now, to center that table, just extend the first part of your CSS code to this:

    .tablepress-id-9 {
    	width: auto;
    	margin: 0 auto 1em !important;
    }

    Basically, we need to tell the browser, that this CSS has priority over the theme CSS for tables.

    Regards,
    Tobias

  11. rayfellers
    Member
    Posted 1 year ago #

    Problem resolved. Thank you very much for correcting this for me.

    Regards,
    Raymond

  12. TobiasBg
    Member
    Plugin Author

    Posted 1 year ago #

    Hi,

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

    Best wishes,
    Tobias

    P.S.: In case you haven't, please rate TablePress here in the plugin directory. Thanks!

  13. Jaime
    Member
    Posted 4 months ago #

    Hello Tobias,
    Thanks for the great plugin!

    I was having the same issue but I found a solution.

    The Custom CSS margin property wasn't working to center the tables, although the width property worked:

    .tablepress-id-N {
        width: auto;
        margin: 0 auto 1em!important;
    }

    Then I saw that this code was overriding the above Custom CSS margin property.

    dataTables_wrapper .tablepress {
        clear: both;
        margin: 0!important;
    }

    So, this addition to your Custom CSS made it work great:

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

    Thanks again!
    Cheers, Jaime

  14. TobiasBg
    Member
    Plugin Author

    Posted 4 months ago #

    Hi Jaime,

    thanks for your post.

    Well, when using the DataTables JS library on a table, you should actually use this to center the table (and the other controls like search and pagination):

    #tablepress-123_wrapper {
        width: auto;
        margin: 0 auto 1em !important;
    }

    Regards,
    Tobias

  15. Jaime
    Member
    Posted 4 months ago #

    Hey Tobias,
    I see what you mean. Centering the tablepress-xx_wrapper <div> would be cleaner.

    Unfortunately your snippet is not working for me though.

    I got the tablepress-123_wrapper <div> to autofit to width by adding
    ` display: inline-block;'
    But I couldn't get that wrapper div to center on the page.

    I went back to my version and enabled all of the JS controls like search and pagination. They all display, they're just wider than the table. It looks fine in my example.

    Thanks for the quick reply!
    Cheers,
    Jaime

  16. TobiasBg
    Member
    Plugin Author

    Posted 4 months ago #

    Hi Jaime,

    yeah, if you played with the display property, the CSS might not work out of the box.
    Anyway, good to hear that you found a solution! :-)

    Best wishes,
    Tobias

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic

Tags

No tags yet.