WordPress.org

Forums

TablePress
[resolved] Responsive Problems using images (4 posts)

  1. corlissj
    Member
    Posted 11 months ago #

    Hi! I am having issues with the responsive form of my table. It seems to jumble the second column when you use the horizontal scroll.

    You can see the table here under athletics, and conference recognition.

    Here is the CSS I am currently using:
    .tablepress-id-1,
    .tablepress-id-1 td {
    border: none !important;
    font-size: 15px;
    line-height: 20px;
    color: #000000;
    font: open sans;
    }

    .tablepress .column-1 {
    vertical-align: middle;
    }

    .tablepress .column-2 {
    vertical-align: middle;
    }

    .tablepress .column-3 {
    vertical-align: middle;
    }

    .tablepress .column-4 {
    vertical-align: middle;
    }

    .tablepress .column-5 {
    vertical-align: middle;
    }

    .tablepress .column-6 {
    vertical-align: middle;
    }

    .tablepress .column-7 {
    vertical-align: middle;
    }

    .tablepress .column-8 {
    vertical-align: middle;
    }

    .tablepress-id-N,
    .tablepress-id-1 tr,
    .tablepress-id-1 tbody td,
    .tablepress-id-1 thead th,
    .tablepress-id-1 tfoot th {
    border: none;
    }

    .tablepress img {
    max-width: 100%;
    }

    https://wordpress.org/plugins/tablepress/

  2. TobiasBg
    Member
    Plugin Author

    Posted 11 months ago #

    Hi,

    thanks for your post, and sorry for the trouble.

    The "Responsive Tables Extension is not suited for tables like this. It only really works for tables with data in it, like that on the Extension's web page.

    For your table, which is more like a gallery, I'd actually not even recommend using a table. Instead, you should consider more modern HTML approaches, like <div> containers and CSS3 (with Media Queries) to restyle their flow. For example, on larger screens, you could arrange them in three column, as you are having them now, and on small screens, you could show them as one column.
    With tables, due to their long history in HTML, that is not really possible.

    Regards,
    Tobias

  3. corlissj
    Member
    Posted 11 months ago #

    Thanks Tobias,

    Unfortunately my template is not HTML friendly...which sucks. I will see what I can come up with.

    Thanks!

  4. TobiasBg
    Member
    Plugin Author

    Posted 11 months ago #

    Hi,

    yeah, I see :-( The alternative could then be to manually set the row height on the cells, when in responsive mode.

    Regards,
    Tobias

Reply

You must log in to post.

About this Plugin

  • TablePress
  • Frequently Asked Questions
  • Support Threads
  • Reviews

About this Topic