# Making Tables Responsive for Mobile

**URL:** <https://community.hubspot.com/t/making-tables-responsive-for-mobile/8102>\
**Category:** CMS Development\
**Created:** [March 12, 2018, 8:56pm UTC](https://community.hubspot.com/t/making-tables-responsive-for-mobile/8102 "2018-03-12T20:56:04Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![bryane](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/bryane/32/86357_2.png) [@bryane](https://community.hubspot.com/u/bryane)\
**Post date:** [March 12, 2018, 8:56pm UTC](https://community.hubspot.com/t/making-tables-responsive-for-mobile/8102/1 "2018-03-12T20:56:04Z")

</div>

Greatly appreciate any help to make the table in the “News Section” below responsive so it appears correctly on mobile? Displays fine on desktop. Below is a screenshot from my iPhone 6s where you can see the tables and header image extends over the right side of the page.

Thanks in advance for anyone’s help!

 ![IMG_7243.PNG.jpg](https://d2qpr2jzcazej7.cloudfront.net/original/3X/e/2/e2a62adb9e8f776d0c64b4a39ce84fc1de45ba10.jpeg)

---

<div class="post-metadata">

**Author:** ![TRooInbound](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/trooinbound/32/89545_2.png) [@TRooInbound](https://community.hubspot.com/u/TRooInbound)\
**Post date:** [March 13, 2018, 11:12am UTC](https://community.hubspot.com/t/making-tables-responsive-for-mobile/8102/2 "2018-03-13T11:12:04Z")

</div>

Hi @bryane,  
Yes, you can make table responsive with following this URL code,  
[https://css-tricks.com/examples/ResponsiveTables/responsive.php](https://css-tricks.com/examples/ResponsiveTables/responsive.php)

Did my post help answer your query? Help the Community by **marking it as a solution.**

**Team TRooInbound**  
[hello@trooinbound.com](mailto:hello@trooinbound.com)

---

<div class="post-metadata">

**Author:** ![bryane](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/bryane/32/86357_2.png) [@bryane](https://community.hubspot.com/u/bryane)\
**Post date:** [March 13, 2018, 2:38pm UTC](https://community.hubspot.com/t/making-tables-responsive-for-mobile/8102/3 "2018-03-13T14:38:26Z")

</div>

Thanks but I don’t see the code or instructions what I need to do when I go to the CSS-Tricks page provided. I see an example of a Responsive and Non-Responsive Tables. Please let me know what needs to be done. Thx!

---

<div class="post-metadata">

**Author:** ![JulieS](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/julies/32/76463_2.png) [@JulieS](https://community.hubspot.com/u/JulieS)\
**Post date:** [April 19, 2018, 3:51pm UTC](https://community.hubspot.com/t/making-tables-responsive-for-mobile/8102/4 "2018-04-19T15:51:31Z")

</div>

HI, I just see a table when I follow you rlink-- no code.

---

<div class="post-metadata">

**Author:** ![bryane](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/bryane/32/86357_2.png) [@bryane](https://community.hubspot.com/u/bryane)\
**Post date:** [March 13, 2018, 5:38pm UTC](https://community.hubspot.com/t/making-tables-responsive-for-mobile/8102/5 "2018-03-13T17:38:38Z")

</div>

@louiegerodiaz noticed you responded to a post from fmckeon1 a couple of months ago regarding an issue he was having with tables not displaying correctly on his blog. I’m experiencing a similar issue in a newsletter. Hoping you can assist and recommend how I can make the table responsive so it displays correctly on mobile.

Thanks in advance for your help!

---

<div class="post-metadata">

**Author:** ![edjusten](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/edjusten/32/14475_2.png) [@edjusten](https://community.hubspot.com/u/edjusten)\
**Post date:** [March 13, 2018, 10:00pm UTC](https://community.hubspot.com/t/making-tables-responsive-for-mobile/8102/6 "2018-03-13T22:00:30Z")

</div>

Hi @bryane Responsive tables for emails are a challenge indeed, and really not best practice. With all of the different ways email clients process html, there is no telling how it might show up in the various clients. It would be better to find a different way to show that information in your email.

This [post from CSS-Tricks](https://css-tricks.com/ideas-behind-responsive-emails/) presents a few ideas on how to make your email more responsive. But this refers to the whole email rather than just a table within the email. You can most likely use a few of these tricks within the tables in your email.

Tagging a few of our design partners here. Can you assist @dessery , @redbranchmedia , @grantfoster or @Gonzalo ?

Thank you,

Ed Justen

---

<div class="post-metadata">

**Author:** ![bryane](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/bryane/32/86357_2.png) [@bryane](https://community.hubspot.com/u/bryane)\
**Post date:** [March 13, 2018, 10:11pm UTC](https://community.hubspot.com/t/making-tables-responsive-for-mobile/8102/7 "2018-03-13T22:11:41Z")

</div>

Thanks @edjusten! To get the logos lined up correctly for each post HubSpot recommended using a table which seemed to work fine at first until running into display issues. 😉 I’ll check out the post you shared. Look forward to hearing from the design partners with any suggestions.

---

<div class="post-metadata">

**Author:** ![dessery](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/dessery/32/92851_2.png) [@dessery](https://community.hubspot.com/u/dessery)\
**Post date:** [March 14, 2018, 9:24am UTC](https://community.hubspot.com/t/making-tables-responsive-for-mobile/8102/8 "2018-03-14T09:24:32Z")

</div>

Hi @bryane

Responsive emails can be a pain at the best of times. In theory though, if your table has a width of 100%, it should adjust to the container around it.

One common problem that we often run into though where the email client is ignoring that 100% is when images are involved, the main problem with this is the HubSpot editor annoyingly addds inline css with the width’s and (sometimes) heights of the image file to the image tag. This higher width then forces the width of the table to be wider than its container and it breaks out of the box as shown in your screenshot.

I would make sure your table has a css class asigned to it in your html, and then try something like this in the email header:

```auto
<style type="text/css">
 @media screen and (max-width: 650px) {
 .my_table_class img { width: auto !important; height: auto !important; max-width: 100%; } 
 }
</style>

```

Just make sure you replace .my\_table\_class with whatever class you have added to your table.

What this should do is force the height and width of your image to be automatically generated. The !important will override the inline styles that HubSpot have added. The max-width will make sure the image is no bigger than the column of the table it is in.

If that doesn’t work, I would try setting a width instead of using width: auto and see if that helps.

I hope that helps point you in the right direction.

All the best

David