WordPress.org

Support

Support » Plugins and Hacks » TablePress » [Resolved] Center table on page

[Resolved] Center table on page

Viewing 15 replies - 1 through 15 (of 15 total)
  • Plugin Author TobiasBg

    @tobiasbg

    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

    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!

    Plugin Author TobiasBg

    @tobiasbg

    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!

    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.

    Plugin Author TobiasBg

    @tobiasbg

    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

    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.

    Plugin Author TobiasBg

    @tobiasbg

    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

    Oops. Sorry about that. Try this page.

    Plugin Author TobiasBg

    @tobiasbg

    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

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

    Regards,
    Raymond

    Plugin Author TobiasBg

    @tobiasbg

    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!

    Jaime

    @jaimecapra

    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

    Plugin Author TobiasBg

    @tobiasbg

    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

    Jaime

    @jaimecapra

    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

    Plugin Author TobiasBg

    @tobiasbg

    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

Viewing 15 replies - 1 through 15 (of 15 total)
  • The topic ‘[Resolved] Center table on page’ is closed to new replies.
Skip to toolbar