Making a table responsive

[Checklick_team]

Hi there,

I'm trying to make a table responsive because it looks odd on mobile devices.

As an example, the code for my first table is listed below:

<table style="border-color: #99acc2; border-collapse: collapse; table-layout: fixed;" cellpadding="4">
<tbody>
<tr>
<td style="width: 266px; text-align: center; background-color: #cccccc;">
<p><strong>Who is eligible</strong></p>
</td>
<td style="width: 256px; text-align: center; background-color: #cccccc;">
<p><strong>How to apply</strong></p>
</td>
<td style="width: 309px; text-align: center; background-color: #cccccc;">
<p><strong>More information</strong></p>
</td>
</tr>
<tr>
<td style="width: 266px;">
<ul style="font-size: 9px;">
<li>If you were recently laid off or have reduced hours and qualify for EI benefits, you can submit your request at any time.&nbsp;</li>
</ul>
</td>
<td style="width: 256px;">
<ul style="font-size: 9px;">
<li><a href="https://srv270.hrdc-drhc.gc.ca/AW/introduction?GoCTemplateCulture=en-CA" rel="noopener" target="_blank">https://srv270.hrdc-drhc.gc.ca/AW/introduction?GoCTemplateCulture=en-CA</a></li>
</ul>
</td>
<td style="width: 309px;">
<ul style="font-size: 9px;">
<li><a href="https://www.canada.ca/en/services/benefits/ei/ei-regular-benefit.html" rel="noopener" target="_blank">https://www.canada.ca/en/services/benefits/ei/ei-regular-benefit.html</a></li>
</ul>
</td>
</tr>
</tbody>
</table>

My understanding is the I am to insert the HTML code below to make it responsive but where do I insert it is my question?

<div style="overflow-x:auto;">
  <table>
    ...
  </table>
</div>

Any help would be much appreciated.

Dominik

[Stephanie-OG]

Hi Dominik - CSS Tricks has a post on some ideas on how to make tables responsive. 

For your layout if it's only those three boxes, maybe you could just use three columns on HubSpot and add a little table (with just one column and two rows: title and information) on each so that they stack up. Or use something like Flexbox or Grid.

---

Stephanie O'Gay Garcia

HubSpot CMS Design & Development

Website | Contact

If this helped, please mark it as the solution to your question, thanks!