---
title: How Can I Make My Tables Responsive
description: how-can-i-make-my-tables-responsive
image: https://www.rusticfurnitureboston.com/hubfs/Berlin/IMG_1179.jpg
---

[![aplite-logo.png](https://landing.saltedstone.com/hs-fs/hubfs/Aplite/aplite-logo.png?width=209&name=aplite-logo.png "aplite-logo.png")](https://www.rusticfurnitureboston.com/email-design)

[![Get Started](https://no-cache.hubspot.com/cta/default/2676636/afc0d40c-5a50-49bb-9d58-b4fb7978fb8c.png)](https://cta-redirect.hubspot.com/cta/redirect/2676636/afc0d40c-5a50-49bb-9d58-b4fb7978fb8c)

[Ë](https://www.rusticfurnitureboston.com/email-design/how-can-i-make-my-tables-responsive#mobile)

# Email Design Support Guide

[**](https://www.rusticfurnitureboston.com/email-design/how-can-i-make-my-tables-responsive#cos-search)

![James Zilch](https://www.rusticfurnitureboston.com/hubfs/Hubspot%20picture%203-1.jpg) By [James Zilch](https://www.rusticfurnitureboston.com/email-design/author/james-zilch) • listopadu 6, 2017

# How Can I Make My Tables Responsive

Most people of customer know how to create Tables in HubSpot but a lot of people don't know what it would take a create a responsive table. While having tables in your website page is a big no no email clients are becoming more and more mobile responsive. With this responsiveness in email client becmoming so popualr it is not wonder that more and more people would need to have email clients that are mobile responsive. 

Consider this example of a table with fixed widths below. 

![](https://www.rusticfurnitureboston.com/hs-fs/hubfs/Table_As_HPadding_Code.png?width=450&name=Table_As_HPadding_Code.png)

Since these are all fixed widths what we can do is simply convert the fixed widths to percentages. What you would want to do is set the width on the <table> element first to be the total that you want for the table. In most cases 90% or 100% will be what you're looking for. Normally the only other widths thats are defined are on the <td> or the table cells within each row. From each cell you can also set the percentage of each cell. 

<table width="100%">  
 <tbody>  
 <tr>  
 <td width="33.33%">Item 1</td>  
 <td width="33.33%">Item 2</td>  
 <td width="33.33%">Item 3</td>  
 </tr>  
 </tbody>  
</table>

As percentages are relative to the viewport it will ensure that if the screen scales down then so will the tables and the cells within the table too. 

 

 

how-can-i-make-my-tables-responsive

[![DRAFT (4).png](https://www.rusticfurnitureboston.com/hs-fs/hubfs/DRAFT%20(4).png?width=500&height=500&name=DRAFT%20(4).png "DRAFT (4).png")](http://rusticfurtnitureboston.com)

#### HubSpot

Contact

 HubSpot  
 25 First Street  
 Boston, MA 02113  
 597-376-3756

#### Keep in Touch

### Subscribe to Our Blog

<https://www.pinterest.com/rusticboston/>