[Plugin: WP-Table Reloaded] Two tables in one post

I mean that the two tables are in the same post.

Hi,

yes, this is possible with some CSS code.
First, you will need to reduce the widths (so that the tables fit next to each other) and then let them float left and right:

.wp-table-reloaded-id-1 {
  width: 49%!important;
  float: left!important;
}

.wp-table-reloaded-id-2 {
  width: 49%!important;
  float: right!important;
}

Here, table 1 is the one on the left, and table 2 the one on the right.
I use a width of 49% to allow for some space between them, and to compensate rounding errors.

Unfortunately, this easy solution might not work with all tables and themes, so this might need some tweaking.

Regards,
Tobias

I forgot something very important, both are the same table but different columns

[table id=4 hide_columns=”all” show_columns=”1,3″ /]
[table id=4 hide_columns=”all” show_columns=”1,5″ /]

Hi,

ah, ok. In that case, you will need to use the ID based CSS selectors, i.e.

#wp-table-reloaded-id-1-no-1 {
  width: 49%!important;
  float: left!important;
}

#wp-table-reloaded-id-1-no-2 {
  width: 49%!important;
  float: right!important;
}

Regards,
Tobias

Unfortunatly that code isn′t working. I tested with other table which has originaly 2 columns and it works perfect with

[table id=4 /] [table id=4 /]

but when I use the table that I need with this code:

[table id=4 hide_columns=”all” show_columns=”1,3″ /] [table id=4 hide_columns=”all” show_columns=”1,5″ /]

It shows me one table on the left and the other table on the right but not next to the other, right but under the other. Understand? Diagonaly

I want this:

[Table here ] [Table here]

And it is doing this:

[Table here ]
[Table here]

HELP GENIUS!

Hi,

can you please post the URL to the page with the tables?

Regards,
Tobias

The tables are both id 4
https://sorianobasket.com/test1/

here is all that Im using

#wp-table-reloaded-id-4-no-1 {
width: 49%!important;
float: left!important;
}

#wp-table-reloaded-id-4-no-2 {
width: 49%!important;
float: right!important;
}
.dataTables_filter {
width: 59%;
float: center;
}

.dataTables_paginate {
width: 394px;
float: right;
text-align: right;
}

.wp-table-reloaded-id-13 {
width: 210px!important;
height: 200px!important;
font-size: 12px;
}

.wp-table-reloaded-id-13 {
margin: 5px auto!important;
}

.wp-table-reloaded-id-12 {
width: 210px!important;
height: 200px!important;
font-size: 12px;
}

.wp-table-reloaded-id-12 {
margin: 5px auto!important;
}

.wp-table-reloaded-id-8 {
width: 210px!important;
height: 200px!important;
font-size: 12px;
}

.wp-table-reloaded-id-8 {
margin: 5px auto!important;
}

.wp-table-reloaded-id-9 {
width: 210px!important;
height: 200px!important;
font-size: 12px;
}

.wp-table-reloaded-id-9 {
margin: 5px auto!important;
}
.wp-table-reloaded-id-10 {
width: 210px!important;
height: 200px!important;
font-size: 12px;
}

.wp-table-reloaded-id-10 {
margin: 5px auto!important;
}

.style1.tabberlive .tabbertab {
padding: 0px;
}

.wp-table-reloaded {
margin: 0px 0px 0px 0px;
}

.tabberlive.style1 {
padding: 0px 0 3px;
}
.style1.tabberlive .tabbertab {
background: none repeat scroll 0 0 white;
margin: 0px;
padding: 0px;
border: 1px solid #CCC;
}

.dataTables_wrapper {
position: relative;
zoom: 1;
min-height: 200px;
_height:200px;
clear: both;
}
.wp-table-reloaded-id-1 th, .wp-table-reloaded-id-1 .sorting {
background-color: #000000!important;
font-family: arial;
color: #FFFFFF!important;
}

.wp-table-reloaded-id-1 .sorting_asc, .wp-table-reloaded-id-1 .sorting_desc {
background-color: #000000!important;
}

.wp-table-reloaded-id-1 th .row-1 {
font-family: Tahoma;
font-size: 13px;
color: #FFFFFF;
}

.wp-table-reloaded-id-1 .column-2 {
width: 15px;
}

.wp-table-reloaded-id-3 .column-1 {
width: 50px;
}

.wp-table-reloaded-id-3 .column-2 {
width: 10px;
}

.wp-table-reloaded-id-3 .column-3 {
width: 10px;
}

.wp-table-reloaded-id-3 .column-4 {
width: 10px;
}

.wp-table-reloaded-id-3 .column-5 {
width: 10px;
}

.wp-table-reloaded-id-8 .column-1 .column-2 .column-3 .column-4 .column-5 .column-6 .column-7 .column-8 {
width: 10px;
}

.wp-table-reloaded-id-8 .column-8 {
font-weight: bold;
}

Hi,

as you have enabled DataTables on one table here, you will need to use a modified code.

Can you try again with:

#wp-table-reloaded-id-4-no-1_wrapper {
  width: 49%!important;
  float: left!important;
}

#wp-table-reloaded-id-1-no-2 {
  width: 49%!important;
  float: right!important;
}

And also, turn of the “Table Output Caching” for table 4, by unchecking the checkbox on the “Edit” screen!

Regards,
Tobias

Unfortunatly isn′t working, I used that code (both with id-4) but nothing happened, unchecked table output caching, and nothing. Here is the url, and I also show you that with another table is working. For the other table I′m just using

[table id=6 /] [table id=6 /]

In the edit of this table I cant change nothing of pagination and so… because is in grey and unable to change it.

This is so strange!!

https://www.sorianobasket.com/test1

Hi,

for table 6, you can’t change pagination, because the “Table Head” checkbox is deactivated.

Here is another try:

#wp-table-reloaded-id-4-no-1_wrapper {
  width: 49%!important;
  float: left!important;
  clear: none!important;
}

#wp-table-reloaded-id-1-no-2_wrapper {
  width: 49%!important;
  float: right!important;
  clear: none!important;
}

Regards,
Tobias

GENIOUSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSS S S S SS SSSS IT WORKED

Hi,

very nice, great to hear that this finally worked! ??

Best wishes,
Tobias

Hello again, now i′m trying with 3 tables in one post and I use this

#wp-table-reloaded-id-19-no-1_wrapper {
width: 30%!important;
float: left!important;
clear: none!important;
}

#wp-table-reloaded-id-19-no-2_wrapper {
width: 30%!important;
float: right!important;
clear: none!important;
}

#wp-table-reloaded-id-19-no-3_wrapper {
width: 30%!important;
float: right!important;
clear: none!important;
}

But the result is this:

https://sorianobasket.com/pruebadsa/

I have a left margin problem with the center table. Help!

Hi,

can you please disable “Table Output caching” on table 19? Otherwise, the JavaScript will not work, so that the CSS IDs that your are using are not added to the HTML code.

Regards,
Tobias

I have done it now. I need the 3 tables with the same margin, the center table is touching the right table