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

Viewing 15 replies - 1 through 15 (of 18 total)
  • Thread Starter matiuru

    (@matiuru)

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

    Plugin Author TobiasBg

    (@tobiasbg)

    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

    Thread Starter matiuru

    (@matiuru)

    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″ /]

    Plugin Author TobiasBg

    (@tobiasbg)

    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

    Thread Starter matiuru

    (@matiuru)

    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!

    Plugin Author TobiasBg

    (@tobiasbg)

    Hi,

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

    Regards,
    Tobias

    Thread Starter matiuru

    (@matiuru)

    The tables are both id 4
    http://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;
    }

    Plugin Author TobiasBg

    (@tobiasbg)

    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

    Thread Starter matiuru

    (@matiuru)

    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!!

    http://www.sorianobasket.com/test1

    Plugin Author TobiasBg

    (@tobiasbg)

    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

    Thread Starter matiuru

    (@matiuru)

    GENIOUSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSS S S S SS SSSS IT WORKED

    Plugin Author TobiasBg

    (@tobiasbg)

    Hi,

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

    Best wishes,
    Tobias

    Thread Starter matiuru

    (@matiuru)

    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:

    http://sorianobasket.com/pruebadsa/

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

    Plugin Author TobiasBg

    (@tobiasbg)

    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

    Thread Starter matiuru

    (@matiuru)

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

Viewing 15 replies - 1 through 15 (of 18 total)
  • The topic ‘[Plugin: WP-Table Reloaded] Two tables in one post’ is closed to new replies.