Placing Tables Side by Side (w/o changing table width)

Hi,

thanks for your post, and sorry for the trouble.

Can you please post a link to the page with the table where this problem happens, so that I can take a direct look? Thanks!

Regards,
Tobias

Hey Tobias,

Here is a link to the site: https://top10trading.website/

At the moment I do not have the CSS code added.

I’d like to keep the tables exactly as they appear now, but I would like them side by side, instead of stacked, and spread evenly across the page horizontally. There are only two at the moment, I am planning to have three or four.

Hi,

thanks for the link!

Please try this:
1. On the two table’s “Edit” screens, please uncheck the “Use DataTables” checkbox. (It’s not necessary here as you have turned off the individual features already, and it actually interferes a bit here.)
2. Add this to the “Custom CSS”:

.tablepress-id-1,
.tablepress-id-2 {
	float: left;
	margin-right: 10px;
}

3. Add this on the page, below all the table Shortcodes. This will prevent the page footer from shifting “behind” the tables:
<br style="clear:both" />

Regards,
Tobias

Hey again.

So I tried all of the above (adding the CSS to the plugin, and that line of CSS to the page) If I leave the “Use DataTables” selected on both tables, there was no change in the appearance of the page. Everything stayed exactly as it was.

When I deselected “Use DataTables,” it looks like it does here: https://top10trading.website/

Any thoughts?

Cheers

• This reply was modified 8 years, 3 months ago by shizlist.

Hi,

please make sure to add that HTML <br ... /> tag in the “Text” and not the “Visual” editor when editing the page.
Otherwise, there will be other HTML tags wrapping it.

Regards,
Tobias

Ah, right! I’m such a noob. Thanks, that did it!

My only other question is: how do I get them evenly spaced? Right now, table 1 is flush with the bitter edge of the content area and table two is just a few pixels to the right, and to the right of that is a huge empty space. Is there a way to get the tables centered (in the same way one would center-align text) and evenly spaced across the page, while keeping them the same size?

Thanks again

• This reply was modified 8 years, 3 months ago by shizlist.

Hi,

the most flexible solution should be to change the HTML code to this:

<div class="table-wrapper">

[table id=1 /]

[table id=2 /]

</div>
<br style="clear:both" />

and the CSS code to this:

.table-wrapper {
	width: 400px;
	margin: 0 auto;
}
.tablepress-id-1,
.tablepress-id-2 {
	float: left;
	width: 48%;
	margin-right: 2%;
}

Regards,
Tobias

BOOM! Worked ??

You sir, are the man.

I’ll be leaving you a great rating on the plugin.

Thank you for all the help. And good luck with everything!

Cheers

Hi,

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

Best wishes,
Tobias

Just left you a 5 star rating and sent a donation via paypal.

Thanks again.

Hi,

thanks, I really appreciate it!

Best wishes,
Tobias

Hey again,

So I had my site looking great with 3 tables. I’ve added a fourth, and now I can’t figure out how to achieve the same effect (tables side by side, evenly spaced across the page, and center-aligned).

I’ve tried to adjust the code you gave me previously to accommodate 4 tables, but no matter what I do, the 4th table is always placed below the others. Also, for some reason, the search bar and sorting menu drop down as well. See here: https://www.top10trading.website

Here’s what I currently have in the custom CSS:

.tablepress {
width: 200px;
}

.tablepress-id-1,
.tablepress-id-2,
.tablepress-id-3,
.tablepress-id-4 {
float: left;
margin-right: 2%;
}

.table-wrapper {
width: 100%;
margin: 0 auto;
}

.table-wrapper {
width: 100%;
margin: 0 auto;
}

.table-wrapper {
width: 100%;
margin: 0 auto;
}

.table-wrapper {
width: 100%;
margin: 0 auto;
}

.tablepress-id-1,
.tablepress-id-2,
.tablepress-id-3,
.tablepress-id-4 {
float: left;
width: 21%;
margin-left: 2%;
margin-right: 2%;
}

Any help would be appreciated. Hope all is going well. Thanks!

• This reply was modified 8 years, 2 months ago by shizlist.

Hi,

the reason for this simply is that the fourth table has the “Use DataTables” checkbox enabled, while the others do not. So, please simply uncheck the “Use DataTables” checkbox for table 4.

In your CSS code, you could also add a small optimization. The block

.table-wrapper {
  width: 100%;
  margin: 0 auto;
}

is only necessary once, and not four times.

Regards,
Tobias

Thanks! I unchecked data tables for table 4. The alignment and spacing looks great, but something very strange happened. Hard to describe. Take a look https://www.top10trading.website

Cheers

Hi,

it seems like you simply unchecked the “Alternating Row Colors” checkboxes for the first two tables.

Also, the fourth Shortcode should be inside the <div class="table-wrapper"> as well.

Regards,
Tobias