Need Assistance with Stacking on Mobile

  • Resolved cwright1

    (@cwright1)


    4 years, 9 months ago

    Hello,

    I am looking to stack my table on mobile. I ama using the following:
    @media (max-width: 767px) {
    .tablepress-id-152 tbody td {
    display: block;
    }
    }

    When I use the above code, my rows are stacked, by the table heads are not (they span across the page on my iPhone). I commented the code out for now in the Custom CSS for the TablePress styling. Any assistance is greatly appreciated.

    – Corey

    The page I need help with: [log in to see the link]

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

    (@tobiasbg)

    4 years, 9 months ago

    Hi,

    thanks for your post, and sorry for the trouble.

    That’s because the table head cells are HTML <th> elements, but your CSS only applies to HTML <td> elements. You could have to extend the code for that:

    @media (max-width: 767px) {
  .tablepress-id-152 tbody td,
  .tablepress-id-152 thead th {
    display: block;
  }
}

    However, it will then probably not look too nice as the header row will still be separated from the body rows. Usually, it’s therefore a good idea to hide the header row on small screens.

    That’s also how the TablePress Responsive Tables Extension from https://tablepress.org/extensions/responsive-tables/ does it with its stack mode.

    Regards,
    Tobias

    Thread Starter cwright1

    (@cwright1)

    4 years, 9 months ago

    Hi Tobias,

    Thank you for the great support!

    I added some additional CSS to style the mobile layout:
    @media (max-width: 767px) {

    .tablepress-id-152 tbody td,
    .tablepress-id-152 thead th {
    width: 100% !important;
    display: block !important;
    }

    .tablepress-id-152 .column-1,
    .tablepress-id-152 .column-2,
    .tablepress-id-152 .column-3,
    .tablepress-id-152 .column-4,
    {
    width: 100% !important;
    display: block !important;
    }

    }

    Plugin Author Tobias Bäthge

    (@tobiasbg)

    4 years, 9 months ago

    Hi,

    cool! One thing: There must not be a comma right before the {, i.e. in

    .tablepress-id-152 .column-4,
{

    But actually, you can remove that full chunk of code, as the same is already done by the first chunk.

    Regards,
    Tobias

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

The topic ‘Need Assistance with Stacking on Mobile’ is closed to new replies.