HTML tables on mobile devices
-
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)
-
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.
-
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!
-
Hi Kathryn,
Example page here – https://harboursideestate.wordpress.com/ourdesigns/
Any suggestions would be great. Thank you.
-
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/
http://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queriesSo 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.
- The topic ‘HTML tables on mobile devices’ is closed to new replies.