CMS Development

brittwhittemore
Member

Table responsiveness

SOLVE

Hi there - I cannot get a table in my blog post to be responsive/mobile friendly. We've already used this suggestion, but it's still not working.

 

Any suggestions? Here's a preview of the blog -I'm talking about the computer images: http://blog.extensionengine.com/gamification-in-online-learning?hs_preview=kXoeuSBr-5246979478. I did use a table inside of the table to get the spacing aligned correctly. So we have one table cell within the table that's holding the text under each computer image.

0 Upvotes
1 Accepted solution
Jsum
Solution
Key Advisor

Table responsiveness

SOLVE

@brittwhittemore,

 

You have inline styling for a static width on all of your <td>s. the width's are set to 377px. This means that no matter what your tds will always be 377px wide which is not responsive.

 

Tables are deprecated by the way. They still have their uses, and this could be one of them, but there are better options for creating this type of layout that are autmatically responsive, such as using flexbox.

 

If you want to continue using the table then you should first crawl your table code for any inline styling and remove it. 

 

Second go into your css, use wrapper classes to target this specific table, and set the table, tbody, thead, and tr to a width of 100%.

 

Set your td width. This is where tables fall short compared to flexbox. If you always have 2 tds per row then setting them to 50% width will work. If for what ever reason you need one of your rows to contain 3 or more td's then you need to add specific classes to the row containing them so that you can make the width of the tds in that row a percentage that equals 100% (i.e. for 4 tds it would be a width of 25%). something like this would be an issue with flexbox because you could have your "td"s (divs if flexbox) automatically share the space responsively. Just something to think about.

View solution in original post

0 Upvotes
1 Reply 1
Jsum
Solution
Key Advisor

Table responsiveness

SOLVE

@brittwhittemore,

 

You have inline styling for a static width on all of your <td>s. the width's are set to 377px. This means that no matter what your tds will always be 377px wide which is not responsive.

 

Tables are deprecated by the way. They still have their uses, and this could be one of them, but there are better options for creating this type of layout that are autmatically responsive, such as using flexbox.

 

If you want to continue using the table then you should first crawl your table code for any inline styling and remove it. 

 

Second go into your css, use wrapper classes to target this specific table, and set the table, tbody, thead, and tr to a width of 100%.

 

Set your td width. This is where tables fall short compared to flexbox. If you always have 2 tds per row then setting them to 50% width will work. If for what ever reason you need one of your rows to contain 3 or more td's then you need to add specific classes to the row containing them so that you can make the width of the tds in that row a percentage that equals 100% (i.e. for 4 tds it would be a width of 25%). something like this would be an issue with flexbox because you could have your "td"s (divs if flexbox) automatically share the space responsively. Just something to think about.

0 Upvotes