Support » Plugin: TablePress - Tables in WordPress made easy » Responsive problem

  • Resolved Taryn

    (@ladytike)


    Hi!
    I’ve downloaded your Responsive Table Extension, but my table is not displaying properly on phones. You can touch it to scroll horizontally, but when it rearranged the layout, things aren’t lined up properly. I tried checking the box in the table to have the first row be the Header, but that made things worse – the header stayed put and was still out of alignment with the rest of the table, and it was also out of alignment. Any thoughts? This looks like it would be an awesome plugin from the one on your website if I could get it to work.

    Thanks!

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

Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Author TobiasBg

    (@tobiasbg)

    Hi,

    thanks for your post, and sorry for the trouble.

    Can you please post a link to the page with the table where this problem happens, so that I can take a direct look? Thanks!

    Regards,
    Tobias

    Thread Starter Taryn

    (@ladytike)

    Oops – so sorry I forgot that. Here it is – and thank you. 🙂
    http://www.kickasstechsupport.com/pricing/

    Plugin Author TobiasBg

    (@tobiasbg)

    Hi,

    thanks for the link!

    The reason for this issue is that your table cells have different heights, as this is not directly tabular data. You’ll therefore adjust that height in the responsive mode, e.g. with this “Custom CSS” on the “Plugin Options” screen:

    @media (max-width: 767px) {
      .tablepress-id-1 .column-1 {
         height: 60px;
         white-space: normal;
      }
      .tablepress-id-1 .column-2,
      .tablepress-id-1 .column-3 {
         height: 180px;
         white-space: normal;
      }
    }

    That will fix the alignment, but the overall result will probably still not be satisfying. Due to how they work internally, a table is probably not the best HTML structure for this.

    Regards,
    Tobias

    Thread Starter Taryn

    (@ladytike)

    Hmmm – I see what you mean. How would I best display this type of data so it looks nice on a mobile? Any ideas?

    Thanks! 🙂

    Plugin Author TobiasBg

    (@tobiasbg)

    Hi,

    the best approach would probably be to use some other sort of column creating, which maybe uses HTML <div> elements. With some CSS3 Media Queries, you could then show the two columns underneath each other on small screen.
    A plugin like this might be helpful: https://wordpress.org/plugins/grid-columns/

    Regards,
    Tobias

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Responsive problem’ is closed to new replies.