Show tables next to each other

Hi,

thanks for your question.

This should be possible with some extra CSS code. But at first, you should correctly deactivate the DataTables JavaScript library for your tables. Instead of unchecking all features individually, you should just uncheck the “Use DataTables” checkbox.

After that, you can use the following code, which should be entered into the “Custom CSS” textarea on the “Plugin Options” screen of TablePress:

.tablepress-id-1,
.tablepress-id-2,
.tablepress-id-3 {
  width: 33%;
  float: left;
}

This will give the tables with the IDs 1, 2, and 3 (you should adjust this to your table IDs) one third of the available width and move them next to each other.

Regards,
Tobias

Thanks very much for your quick reply!

I now have tables next to each other. They are not aligning across the screen, however, but rather are sitting below each other a little bit. If I take out the table name, then the tables will sit directly next to each other, but I have to have the table name.

I would also like to add some space between the tables. How do you recommend doing this?

Also, I would like to center the table name over the table, if possible. Here’s what I’ve tried so far:

This gets the table name centered across the page, not across the table:

.tablepress-table-name {
        text-align: center;
}

This gets the table names centered, but then the tables don’t go across the screen, but back to one table underneath each other:

.tablepress-table-name {
	text-align: center;
	width:33%;
}

Lastly, while the code you posted previously does work (re-copied below), is there a way to apply this width and float to ALL tables without having to specify the ID of each one?:

.tablepress-id-1,
.tablepress-id-2,
.tablepress-id-3 {
       width: 33%;
       float: left;
}

Thanks again!

Hi,

ah, wanting the table name makes things a little bit more complicated. The solution is to use a wrapping container around the [table] Shortcode.

I’ll first answer your last question:
This is possible by using the class .tablepress instead of the ID based selectors. However, I would not really recommend this. The reason is that it would make it harder for you to use a TablePress table on your site where you do not want the three tables next to each other.

Now, the solution to your issue:
Instead of using just the Shortcodes in your post, you should wrap them in a wrapping <div> container:

<div class="tablepress-wrapper">

[table id=1 /]

</div>

<div class="tablepress-wrapper">

[table id=2 /]

</div>

<div class="tablepress-wrapper">

[table id=3 /]

</div>

(The empty lines are important here, as WordPress sometimes adds wrong line break tags here.)

With this wrapper, you’ll just need “Custom CSS” like this (thus remove the code from my previous post):

.tablepress-wrapper {
    width: 33%;
    float: left;
    padding-right: 10px;
}
.tablepress-wrapper .tablepress-table-name {
    text-align: center;
}

This will also add some spacing between the tables.

Regards,
Tobias

Great, thanks!

I had to change the width of the tablepress wrapper from 33% to 32% because the additional padding pushed the third table to the next line. So, that did allow the tables to be next to one another and give some space between tables. It now looks like this:

.tablepress-wrapper {
    width: 32%;
    float: left;
    padding-right: 10px;
}

This code to center the table name over the table mostly worked, except because the padding was added to the wrapper, the table name was centering over the width of the table AND padding. So, the table name was showing up a little bit more to the right with this code:

.tablepress-wrapper .tablepress-table-name {
    text-align: center;
}

To counteract this, I added padding to the above code. I would have thought adding the 10px to the right padding would have done it, but it doesn’t look centered unless it’s 24px of right padding. So, now I have this:

.tablepress-wrapper .tablepress-table-name {
    text-align: center;
    padding-right: 24px;
}

I’m not sure this centers it exactly, but it does look pretty close. What do you think–is it centered? Is there a way to tell for sure?

Everything is looking really good! Besides the centering question, I wonder if you know of a way to keep the tables from overlapping when the browser size is reduced in this responsive layout? I would like them to just fall below each other so they are still readable. Not sure if this is the appropriate place for this question…

Hi,

ah, yes, the padding would influence the centering here. It might therefore be better to do this as a padding.
Please try

.tablepress-wrapper {
    width: 32%;
    float: left;
    margin-right: 10px;
}
.tablepress-wrapper .tablepress-table-name {
    text-align: center;
}

This should work better for the centering of the table name, and without extra workaround code, which indeed is not reliable at all times.

About the overlapping: I’m not an expert with this, unfortunately, but the best approach might be to use CSS media queries, and depending on the available screen width, change the CSS declarations (specifically the width and the float) of the .tablepress-wrapper <div>, to get a “responsive layout”.

Regards,
Tobias

I managed to get the tables to not overlap each other when resizing the browser, but rather move down below each other. To do this I changed the tablepress-wrapper width to a fixed pixel amount (295px) instead of the percentage (32%).

However, centering the table name isn’t working. I am stumped. The issue appears to be with the tablepress-wrapper, but what is causing it I don’t know. As you can see, I took out the padding-right and margin-right properties from the tablepress-wrapper, but there is still space to the right of the tables.

The custom code I am currently using is:

.tablepress th,
.tablepress td {
	text-align: center;
}

.tablepress {
  width: auto;
	border: 1px solid black;
}
.tablepress .column-1 {
	width: 30px;
}
.tablepress .column-2 {
	width: 30px;
}
.tablepress .column-3 {
	width: 30px;
}
.tablepress-wrapper {
        width: 295px;
        float: left;
}
.tablepress-wrapper .tablepress-table-name {
         text-align: center;
}

And the HTML for the page looks like this, with the spaces:

<p> These are rates to some popular requested destinations.  It is NOT a complete rate list.  Please call if your desired destination is not in the rate list--we would be happy to speak with you!</p>

<div class="tablepress-wrapper">

[table id=1 /]

</div>

<div class="tablepress-wrapper">

[table id=2 /]

</div>

<div class="tablepress-wrapper">

[table id=3 /]

</div>

<div class="tablepress-wrapper">

[table id=4 /]

</div>

<div class="tablepress-wrapper">

[table id=5 /]

</div>

You’ve been very helpful so far, thank you!

Hi,

I think I found it: The reason is that the table is not as wide as the .tablepress-wrapper container, and is left aligned in that container. We’ll just have to center the actual table in the wrapper as well. To do that, please change

.tablepress {
	width: auto;
	border: 1px solid black;
}

to

.tablepress {
	width: auto;
	border: 1px solid black;
	margin: 0 auto 1em;
}

Additionally, with the same reasoning as in my second post of this thread, I would prepend all of these CSS blocks with the .tablepress-wrapper class. And you can also optimize the code a little bit:

.tablepress-wrapper {
        width: 295px;
        float: left;
}
.tablepress-wrapper .tablepress-table-name,
.tablepress-wrapper .tablepress th,
.tablepress-wrapper .tablepress td {
	text-align: center;
}
.tablepress-wrapper .tablepress {
	width: auto;
	border: 1px solid black;
	margin: 0 auto 1em;
}
.tablepress-wrapper .tablepress .column-1,
.tablepress-wrapper .tablepress .column-2,
.tablepress-wrapper .tablepress .column-3 {
	width: 30px;
}

Best wishes,
Tobias

That did it!! Thanks so much! I am new to your plug-in, but already see why it’s so popular. Not only is it well done, but your support is invaluable. I will be sure to make a donation. Thank you!

Hi,

awesome! That is great to hear ?? Thanks for the confirmation that this did the trick! And also thank you very much for wanting to donate, I really appreciate it!

Best wishes,
Tobias