Center table on page

Hi,

thanks for your question.

This is really easy and the answer to the question is in the TablePress FAQ at https://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!

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.

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.

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.

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

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!

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

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

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

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