Responsive Table

• 

  julievaudry · Member · May 30, 2016 at 11:31 am

  • Copy link
  • Add topic to favorites

  Hi!

  I would like to know how can I get a responsive table on my responsive site?

  I used <div style="overflow-x:auto;"> for my table, but I don’t see the effect when I access my site via my phone. It seems to be responsive on my desktop and tablet, but not on my phone. In fact, the third column is disappearing.

  Can you please help me? The table I am talking about is there: https://thecurc.com/our-partners/

  Thank you very much,

  Julie

  The blog I need help with is: (visible only to logged in users)

• 

  mariaantoniettaperna · Member · May 30, 2016 at 5:36 pm

  • Copy link

  Hi Julie,

  The third column is not disappearing. If you look at the end of the grid, you’ll see a horizontal scrollbar to access the third column. This is what overflow-x: auto does: as soon as there isn’t enough space for the entire content, the container will display a horizontal scrollbar and the overflowing content is accessible using scrolling.

  I hope this helps :)

  – Maria Antonietta

• 

  siobhyb · Member · May 31, 2016 at 3:40 pm

  • Copy link

  Hi Julia,

  Maria’s right. :) The third-column doesn’t disappear and is instead accessible by scrolling to the right on your phone.

  If you’d like some alternative solutions, then there’s a nice round up of options for responsive data tables on CSS tricks here:

  Responsive Data Tables

  You could also consider moving away from tables and using our built in gallery feature to display the logos on that page. Galleries are responsive by default and you can read more about them in the following guide:

  https://en.support.wordpress.com/gallery/

  Let me know if you have any questions on the above.