Responsive Problems using images

  • Resolved corlissj

    (@corlissj)


    11 years, 10 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://ww.wp.xz.cn/plugins/tablepress/

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Author Tobias Bäthge

    (@tobiasbg)

    11 years, 10 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

    Thread Starter corlissj

    (@corlissj)

    11 years, 10 months ago

    Thanks Tobias,

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

    Thanks!

    Plugin Author Tobias Bäthge

    (@tobiasbg)

    11 years, 10 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

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘Responsive Problems using images’ is closed to new replies.

Tags