WordPress.org

Ready to get started?Download WordPress

Forums

WP-Table Reloaded
[resolved] Responsive Theme vs. WP-Table Reloaded (6 posts)

  1. wairoanz
    Member
    Posted 2 years ago #

    Hi Tobias,

    I'm using a Responsive theme and have a WP-Table Reloaded table at:

    http://curators.co.nz/other-sites/

    The theme uses 3 stylesheets: 1. The standard style.css for full web browser mode, 2. a stylesheet for iPad type devices, and 3. a style sheet for mobile devices.

    I am using css to hide 2 columns when the website is viewed on any device below 750px wide, so in the mobile css stylesheet I have included this:

    .wp-table-reloaded-id-1 .column-3, tr td:nth-child(3) { display:none; visibility:hidden; }
    .wp-table-reloaded-id-1 .column-4, tr td:nth-child(4) { display:none; visibility:hidden; }

    It works, but the problem is that other tables I try to deploy are also hiding columns 3 and 4. It must be something to do with how I am identifying the the table.

    How do I direct the css specifically at table ID-1, Columns 3 & 4 only?

    I would appreciate your help. Thanks.

    http://wordpress.org/extend/plugins/wp-table-reloaded/

  2. TobiasBg
    Member
    Plugin Author

    Posted 2 years ago #

    Hi,

    thanks for your question.

    Basically, this happens because in your CSS code, you are actually telling the browser to hide all third and fourth cells in all rows in all tables, additionally to hiding the third and fourth column of WP-Table Reloaded table 1.
    If you shorten your CSS to

    .wp-table-reloaded-id-1 .column-3,
    .wp-table-reloaded-id-1 .column-4 {
      display:none; visibility:hidden;
    }

    you should get the desired result of just hiding column 3 and 4 of table ID 1.

    Regards,
    Tobias

  3. wairoanz
    Member
    Posted 2 years ago #

    Thanks Tobias, that works. :)

  4. TobiasBg
    Member
    Plugin Author

    Posted 2 years ago #

    Hi,

    great, nice to hear that! Thanks for the confirmation!

    Best wishes,
    Tobias

  5. idoremus
    Member
    Posted 1 year ago #

    Hi Tobias,

    I am trying to do the same thing but my CSS is cascading throughout all sizes. In the CSS for a full size browser what would I put to conteract the display:none; from the mobile style sheet? I tried "inherit", "inline" and "table-column" but they all seemed to break the table.

    Thanks,
    Ian

  6. TobiasBg
    Member
    Plugin Author

    Posted 1 year ago #

    Hi Ian,

    I think that would be

    display: table-cell;

    as the CSS code above directly affects the cells.

    Regards,
    Tobias

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic