How Can I Make My Tables Responsive

Written by James Zilch | Nov 6, 2017 2:52:10 AM

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. 

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.