Hi, the table on this page doesn’t look good on mobile version, although the table is set to “responsive”, any ideas? It seems to be keeping the desktop version…
@Tommy28561 I did a test creating a responsive table inside the rich text module and see a similiar result. In order to fix this you will need to view the source code and delete the inline styles on the td and th elements that are setting the width. Doing this will make them auto width and expand wider. This might be a bug with the CMS.
Hi Jake,
Thanks for the explanation. I’ve been trying to delete the styles in TD, but it suppresses the styles of my table, even in desktop mode. I’ve underlined what I tried deleting:
Here’s the code:
<div data-hs-responsive-table=“true” style=“overflow-x: auto; max-width: 100%; width: 90%; margin-left: auto; margin-right: auto; font-size: 20px;”>
<table style=“width: 100%; border-collapse: collapse; table-layout: fixed; border: 1px solid #99acc2; height: 680.801px;”>
<tbody>
<tr style=“height: 38.6133px;”>
<td
style=“width: 54.1104%; padding: 4px; height: 38.6133px; background-color: #2f2f2f;”>\
</td>
<td style=“width: 22.5649%; padding: 4px; text-align: center; height: 38.6133px; background-color: #2f2f2f;”><span style=“color: #ffffff;”><strong>COMPETITION</strong></span></td>
<td style=“width: 23.2632%; padding: 4px; text-align: center; height: 38.6133px; background-color: #2f2f2f;”><img src=“https://20078549.fs1.hubspotusercontent-na1.net/hubfs/20078549/logo%20(9).svg” width=“140” height=“31” loading=“lazy” alt=“logo (9)” style=“height: auto; max-width: 100%; width: 140px; margin: 7px 0px 0px;”></td>
</tr>
<tr style=“height: 63.7305px;”>
<td style=“width: 54.1104%; padding: 4px; height: 63.7305px; background-color: #2f2f2f;”><span style=“color: #ffffff;”>\ \ \ Active 2G to 5G – Cell ID (GMLC)</span></td>
<td style=“width: 22.5649%; padding: 4px; text-align: center; height: 63.7305px;”><img src=“https://20078549.fs1.hubspotusercontent-na1.net/hubfs/20078549/vector-valid-icon.jpg” width=“47” height=“47” loading=“lazy” alt=“vector-valid-icon” style=“height: auto; max-width: 100%; width: 47px;”></td>
<td style=“width: 23.2632%; padding: 4px; text-align: center; height: 63.7305px;”><img src=“https://20078549.fs1.hubspotusercontent-na1.net/hubfs/20078549/vector-valid-icon.jpg” width=“47” height=“47” loading=“lazy” alt=“vector-valid-icon” style=“height: auto; max-width: 100%; width: 47px;”></td>
</tr>
<tr style=“height: 63.7305px;”>
<td style=“width: 54.1104%; padding: 4px; height: 63.7305px; background-color: #2f2f2f;”><span style=“color: #ffffff;”>\ \ \ Active 2G to 5G – Subcell (SMLC, SAS, E-SMLC, LMF)</span></td>
<td style=“width: 22.5649%; padding: 4px; text-align: center; height: 63.7305px;”><img src=“https://20078549.fs1.hubspotusercontent-na1.net/hubfs/20078549/vector-valid-icon.jpg” width=“47” height=“47” loading=“lazy” alt=“vector-valid-icon” style=“height: auto; max-width: 100%; width: 47px;”></td>
<td style=“width: 23.2632%; padding: 4px; text-align: center; height: 63.7305px;”><img src=“https://20078549.fs1.hubspotusercontent-na1.net/hubfs/20078549/vector-valid-icon.jpg” width=“47” height=“47” loading=“lazy” alt=“vector-valid-icon” style=“height: auto; max-width: 100%; width: 47px;”></td>
</tr>
<tr style=“height: 63.7305px;”>
<td style=“width: 54.1104%; padding: 4px; height: 63.7305px; background-color: #2f2f2f;”><span style=“color: #ffffff;”>\ \ \ Passive 2G to 5G – Cell ID</span></td>
<td style=“width: 22.5649%; padding: 4px; text-align: center; height: 63.7305px;”>Delayed results</td>
<td style=“width: 23.2632%; padding: 4px; text-align: center; height: 63.7305px;”><img src=“https://20078549.fs1.hubspotusercontent-na1.net/hubfs/20078549/vector-valid-icon.jpg” width=“47” height=“47” loading=“lazy” alt=“vector-valid-icon” style=“height: auto; max-width: 100%; width: 47px;”></td>
</tr>
<tr style=“height: 63.7305px;”>
<td style=“width: 54.1104%; padding: 4px; height: 63.7305px; background-color: #2f2f2f;”><span style=“color: #ffffff;”>\ \ \ Passive 2G to 5G – Subcell</span></td>
<td style=“width: 22.5649%; padding: 4px; text-align: center; height: 63.7305px;”>Aggregated data only</td>
<td style=“width: 23.2632%; padding: 4px; text-align: center; height: 63.7305px;”><img src=“https://20078549.fs1.hubspotusercontent-na1.net/hubfs/20078549/vector-valid-icon.jpg” width=“47” height=“47” loading=“lazy” alt=“vector-valid-icon” style=“height: auto; max-width: 100%; width: 47px;”></td>
</tr>
<tr style=“height: 63.7305px;”>
<td style=“width: 54.1104%; padding: 4px; height: 63.7305px; background-color: #2f2f2f;”><span style=“color: #ffffff;”>\ \ \ RF Fingerprinting 3G to 5G</span></td>
<td style=“width: 22.5649%; padding: 4px; text-align: center; height: 63.7305px;”>Limited competitors</td>
<td style=“width: 23.2632%; padding: 4px; text-align: center; height: 63.7305px;”><img src=“https://20078549.fs1.hubspotusercontent-na1.net/hubfs/20078549/vector-valid-icon.jpg” width=“47” height=“47” loading=“lazy” alt=“vector-valid-icon” style=“height: auto; max-width: 100%; width: 47px;”></td>
</tr>
<tr style=“height: 63.7305px;”>
<td style=“width: 54.1104%; padding: 4px; height: 63.7305px; background-color: #2f2f2f;”><span style=“color: #ffffff;”>\ \ \ Network equipment vendor agnostic</span></td>
<td style=“width: 22.5649%; padding: 4px; text-align: center; height: 63.7305px;”>Limited competitors</td>
<td style=“width: 23.2632%; padding: 4px; text-align: center; height: 63.7305px;”><img src=“https://20078549.fs1.hubspotusercontent-na1.net/hubfs/20078549/vector-valid-icon.jpg” width=“47” height=“47” loading=“lazy” alt=“vector-valid-icon” style=“height: auto; max-width: 100%; width: 47px;”></td>
</tr>
<tr style=“height: 63.7305px;”>
<td style=“width: 54.1104%; padding: 4px; height: 63.7305px; background-color: #2f2f2f;”><span style=“color: #ffffff;”>\ \ \ Geo-specialized processing data with real-time analytics</span></td>
<td style=“width: 22.5649%; padding: 4px; text-align: center; height: 63.7305px;”><img src=“https://20078549.fs1.hubspotusercontent-na1.net/hubfs/20078549/X%20icon.jpg” width=“31” height=“31” loading=“lazy” alt=“X icon” style=“height: auto; max-width: 100%; width: 31px;”></td>
<td style=“width: 23.2632%; padding: 4px; text-align: center; height: 63.7305px;”><img src=“https://20078549.fs1.hubspotusercontent-na1.net/hubfs/20078549/vector-valid-icon.jpg” width=“47” height=“47” loading=“lazy” alt=“vector-valid-icon” style=“height: auto; max-width: 100%; width: 47px;”></td>
</tr>
<tr style=“height: 63.7305px;”>
<td style=“width: 54.1104%; padding: 4px; height: 63.7305px; background-color: #2f2f2f;”><span style=“color: #ffffff;”>\ \ \ Portfolio of composable applications</span></td>
<td style=“width: 22.5649%; padding: 4px; text-align: center; height: 63.7305px;”><img src=“https://20078549.fs1.hubspotusercontent-na1.net/hubfs/20078549/X%20icon.jpg” width=“31” height=“31” loading=“lazy” alt=“X icon” style=“height: auto; max-width: 100%; width: 31px;”></td>
<td style=“width: 23.2632%; padding: 4px; text-align: center; height: 63.7305px;”><img src=“https://20078549.fs1.hubspotusercontent-na1.net/hubfs/20078549/vector-valid-icon.jpg” width=“47” height=“47” loading=“lazy” alt=“vector-valid-icon” style=“height: auto; max-width: 100%; width: 47px;”></td>
</tr>
<tr style=“height: 68.6133px;”>
<td style=“width: 54.1104%; padding: 4px; height: 68.6133px; background-color: #2f2f2f;”><span style=“color: #ffffff;”>\ \ \ Scalability hundreds of millions of subscribers, 1M events per second</span></td>
<td style=“width: 22.5649%; padding: 4px; text-align: center; height: 68.6133px;”><img src=“https://20078549.fs1.hubspotusercontent-na1.net/hubfs/20078549/X%20icon.jpg” width=“31” height=“31” loading=“lazy” alt=“X icon” style=“height: auto; max-width: 100%; width: 31px;”></td>
<td style=“width: 23.2632%; padding: 4px; text-align: center; height: 68.6133px;”><img src=“https://20078549.fs1.hubspotusercontent-na1.net/hubfs/20078549/vector-valid-icon.jpg” width=“47” height=“47” loading=“lazy” alt=“vector-valid-icon” style=“height: auto; max-width: 100%; width: 47px;”></td>
</tr>
<tr style=“height: 63.7305px;”>
<td style=“width: 54.1104%; padding: 4px; height: 63.7305px; background-color: #2f2f2f;”><span style=“color: #ffffff;”>\ \ \ Global clientele, local presence with multilingual support</span></td>
<td style=“width: 22.5649%; padding: 4px; text-align: center; height: 63.7305px;”><img src=“https://20078549.fs1.hubspotusercontent-na1.net/hubfs/20078549/X%20icon.jpg” width=“31” height=“31” loading=“lazy” alt=“X icon” style=“height: auto; max-width: 100%; width: 31px;”></td>
<td style=“width: 23.2632%; padding: 4px; text-align: center; height: 63.7305px;”><img src=“https://20078549.fs1.hubspotusercontent-na1.net/hubfs/20078549/vector-valid-icon.jpg” width=“47” height=“47” loading=“lazy” alt=“vector-valid-icon” style=“height: auto; max-width: 100%; width: 47px;”></td>
</tr>
</tbody>
</table>
</div>
<p>\ </p>
When you say suppress, do you mean change the style of? Like removing the background color? If so, just delete the height and width values and leave the background colors.
If after you delete this and its being added back automatically after you save. The next step would be to have a developer write some code to remove those inline styles as an override.
I’ve deleted the values, but get the same result in mobile version.
Here’s what a line looks like now:
<td style=“padding: 4px; background-color: #2f2f2f;”>
Did I get it wrong?
@Tommy28561 I did some more testing and found an easy fix. For the code you had originally just change the table element width from 100% to a fixed pixel width. That way on mobile that width stays the same and it is then overlowed with a horizontal scrollbar.
I created a codepen for you to view the code you can use.
https://codepen.io/JacobLett/pen/RwvyNOL
Aren’t HTML tables fun!
Many thanks for your help. Having a scroll bar isn’t the ideal but definitely better than what I had before. Plus I wouldn’t see how to get anything better a part from using an image.
Thanks a lot!
You’re welcome. The horizontal scroll on mobile is a quick fix and most often used solution. Another approach would be to create two table layouts, one optimized for mobile and the other optimized for desktop. (Below is screenshot of a mobile optimized layout)
.svg){kind=link}
You could then write a media or container query to change the layout depending on how wide the container is. If you go this direction, I would create a custom module instead of writing the code in the rich text editor. If you need help building something like this let me know.