Mobile Tables

  • Resolved awp87

    (@awp87)


    6 years, 11 months ago

    Hello,

    I have an issue with how tables with many rows and columns are displayed on the mobile phone.

    The top table you see through that URL have following settings:

    [table id=8 responsive=flip responsive_breakpoint=tablet /]

    AND

    @media (max-width: 768px) {

    .tablepress th,
    .tablepress td {
    font-size: 5px;
    }

    }

    @media screen and (max-width: 768px) {

    .tablepress-id-1 {
    white-space: nowrap;
    }

    }

    On my phone the header row is displayed on the left and can be flipped but last two columns look to be empty when displayed on my device.

    I also wonder how I can enable horizontal scrolling for website since this option displays everything perfectly on desktop but mess with settings for mobile.

    Thanks,

    • This topic was modified 6 years, 11 months ago by awp87.
    • This topic was modified 6 years, 11 months ago by awp87.

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

Viewing 1 replies (of 1 total)
  • Plugin Author Tobias B?thge

    (@tobiasbg)

    Hi,

    thanks for your post, and sorry for the trouble.

    At first, I recommend to add this to the “Custom CSS” textarea on the “Plugin Options” screen of TablePress:

    .tablepress {
    word-wrap: normal;
    word-break: normal;
}

    to fix the header row.

    Then, please also add

    .tablepress th,
.tablepress td {
  line-height: normal;
}

    to fix the empty rows issue.

    Regards,
    Tobias

Viewing 1 replies (of 1 total)
  • The topic ‘Mobile Tables’ is closed to new replies.