HTML tables on mobile devices

• 

  crjohnsonltd · Member · Feb 2, 2017 at 3:11 am

  • Copy link
  • Add topic to favorites

  The HTML tables squeeze up together on a mobile device, what’s the CSS to have these appear one after another on a mobile only?

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

• 

  nizamilputra · Member · Feb 2, 2017 at 7:30 am

  • Copy link

  Hi @crjohnsonltd,

  I suggest you to use

  <div>

  instead of

  <table>

  .
  Please take a look this pen, I use

  <div>

  and

  media-query

  to adjust the view on mobile. http://codepen.io/rizqinizamil/pen/pRLaYQ

  Let me know if you need another help.

  Thanks.

• 

  kathrynwp · Staff · Feb 2, 2017 at 4:26 pm

  • Copy link

  crjohnsonltd – could you link me to the page or post where you’re using a table so I can have a look and offer some suggestions? There are ways to make tables mobile-friendly (responsive) but as nizamilputra alluded to, tables are not meant for layout purposes, only for displaying tabular data. Once I can see how you’re using tables I can offer some advice. Thanks!

• 

  crjohnsonltd · Member · Feb 2, 2017 at 11:54 pm

  • Copy link

  Hi Kathryn,

  Example page here – https://harboursideestate.wordpress.com/ourdesigns/

  Any suggestions would be great. Thank you.

• 

  kathrynwp · Staff · Feb 3, 2017 at 2:30 pm

  • Copy link

  Thanks for that example, it’s helpful. Here’s a perfect example of when not to use a table, because you’re just trying to lay out elements.

  I’d suggest you use divs as your container elements instead, as nizamilputra suggested earlier. You can combine divs with media queries to adjust the display of those divs for different screen sizes.

  You can learn more about using media queries that target certain screen sizes here:

  http://en.support.wordpress.com/custom-design/custom-css-media-queries/

  Media Queries for Standard Devices

  
  http://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries

  So for example, here’s a basic three-column structure:

  <div class="thirdcol">Column 1 Stuff</div>
  <div class="thirdcol">Column 2 Stuff</div>
  <div class="thirdcol">Column 3 Stuff</div>

  And here’s the CSS that would style those columns on screens larger than 600px wide:

  @media screen and (min-width: 600px) {
    .thirdcol {
      width: 28%;
      float: left;
      margin-right: 20px;
    }
  }

  On smaller screens, the content would become a single column so it stays readable.

  Let me know if you have any questions.