6 {{ upvoteCount | shortNum }}
6 {{ upvoteCount | shortNum }}

TABLEs on MOBile Phones

by RedWaterDub
5 replies
  • WEB DESIGN
    • |
Hi Warriors,

Wondering if you guys can help me?

I am putting together an inventory of products on my website and I have a few hundred different ones...

I have a wordpress site and I thought the best way to do this would be to use a table. I have the wordpress table plugin "TablePress".

the problem I have is.. Do tables like this work on cell phones? I don't think they do, well I dont think tablepress will work as it wont be responsive for small screens like mobile phones.

What is the best way around this? Or is there a wordpress table plugin which makes responsive tables that I could use instead?

Any help would be appreciated.. Thanks
#mobile #phones #tables
  • Profile picture of the author totalprocessing.net
    Table can respond if the CSS part is set right like using percentages instead of fixed width pixels. The problem with tables comes in when the viewport (window) simply is too small to contain the table and causes the ugly left/right scroll. Tables can only squish so much and still be readable.

    You may want to set your stuff up in <div> containers set to display like tables. Using CSS and @media you could then reshape the display depending on the size of the viewport.

    Alternately you could build different tables with different widths and columns to display a certain way at a specified width, and use CSS to display/hide different tables at different viewport widths using the @media queries.
    Signature
    Premium WooCommerce & WordPress Plugins $10/ea. or FREE With Membership. PluginForage.com
    {{ DiscussionBoard.errors[10180224].message }}
    • Profile picture of the author savidge4
      Tables are basically a disaster in wordpress. It kind of leaves you with 2 options.. columns, and an image. Columns work really good in the desktop to tablet area, but once they are down to mobile the display becomes vertical, and well that sucks to.

      The alternative here is to actually set the data in vertically so it does make sense dropping down to mobile view.

      I think the best option is to use an image. it scales, it can be zoomed in as needed and you don't loose the integrity of how the data is displayed.
      Signature
      Success is an ACT not an idea
      {{ DiscussionBoard.errors[10180557].message }}
  • Profile picture of the author bdwebdeveloper
    I would prefer twitter bootstrap. Do you want to use that?
    {{ DiscussionBoard.errors[10180611].message }}
  • Profile picture of the author IzRush
    Hey RedWaterDub,

    Are you using excel or Gspreadsheets to create your tables or are you directly doing it from the tablepress plugin?

    If you are using an excel type program, you can try jtrt responsive tables.

    I just released a new plugin for creating responsive tables and it may or may not suit your needs but I thought I should let you know about it. You can manually select which columns you want to hide on both tablet and mobile sizes, and it will "hide" them when the screen sizes are small. However the hidden columns can easily be accessed by clicking on the rows. Its a neat solution for responsive tables.

    I don't know if it will help you because if you're not using a table creator that supports CSV files, it wont work.

    Check it out and see if it will help you:

    The github page is located here:
    https://github.com/mythirdeye/jtrt-tables

    or you can download it directly from the wordpress directory here:
    https://wordpress.org/plugins/jtrt-responsive-tables/
    {{ DiscussionBoard.errors[10182019].message }}
  • Profile picture of the author 1nspire
    Yeah Bootstrap has some really nice responsive tables that look great on phones and tablets.

    CSS · Bootstrap
    {{ DiscussionBoard.errors[10692922].message }}

Trending Topics