Table Optimization on Mobile

[shannonk922]

Are there any best practices for making a table you create on a landing page more mobile-friendly? Right now, our text wraps and table shows up crazy on mobile. We have the responsive table code in the source code but it is still making the table appear funky. 

Thanks!

[BillBeebe]

Hi @shannonk922 ,

Mobile tables can be challenging. Without seeing the table and the code behind it, it will be hard for me to provide much more insight.

I find a good resource for seeing how people are handling these types of issues is codepen.io

A specific example:

https://codepen.io/kramerdigital/pen/wvdbYVg

A list of examples:

https://codepen.io/search/pens?q=responsive+tables&order=created_desc

I hope you find this helpful!

Best of luck,

Bill

[shannonk922]

Hi @BillBeebe

 

Thank you for the response! I attached a photo of the screenshot of what the table looks like with filler text.

Here is the code:

<div data-hs-responsive-table="true" style="overflow-x: auto; max-width: 100%; width: 60%; margin-left: auto; margin-right: auto; font-size: 14px;">

<table style="width: 100%; border-collapse: collapse; table-layout: fixed; border-color: #999999; height: 345px;">

<tbody>

<tr style="height: 77px;">

<td style="width: 17.7354%; padding: 4px; background-color: #121111; height: 77px; border-color: #666666; vertical-align: middle;"><span style="color: #3b958f;"><strong>XXXXX</strong></span></td>

<td style="width: 6.34926%; padding: 4px; background-color: #121111; height: 77px; border-color: #666666; vertical-align: middle;"><span style="color: #3b958f;"><strong>XXX</strong></span></td>

<td style="width: 9.22913%; padding: 4px; background-color: #121111; height: 77px; border-color: #666666; vertical-align: middle;"><span style="color: #3b958f;"><strong>XXXXXXX</strong></span></td>

</tr>

<tr style="height: 56px;">

<td style="width: 17.7354%; padding: 4px; background-color: #121111; height: 56px; border-color: #666666; vertical-align: middle;">XXXXXXXXXXXXXXXXXXXXXXXX</td>

<td style="width: 6.34926%; padding: 4px; background-color: #121111; height: 56px; border-color: #666666; vertical-align: middle;"><span style="color: #ffffff;">000</span></td>

<td style="width: 9.22913%; padding: 4px; background-color: #121111; height: 56px; border-color: #666666; vertical-align: middle;">000000</td>

</tr>

<tr style="height: 54px;">

<td style="width: 17.7354%; padding: 4px; background-color: #121111; border-color: #666666; vertical-align: middle; height: 54px;">XXXXXXXXXXXXXXXXXXXXXX</td>

<td style="width: 6.34926%; padding: 4px; background-color: #121111; border-color: #666666; vertical-align: middle; height: 54px;"><span style="color: #ffffff;">000</span></td>

<td style="width: 9.22913%; padding: 4px; background-color: #121111; border-color: #666666; vertical-align: middle; height: 54px;">000000</td>

</tr>

<tr style="height: 53px;">

<td style="width: 17.7354%; padding: 4px; background-color: #121111; border-color: #666666; vertical-align: middle; height: 53px;">XXXXXXXXXXXXXXXXXXXXX</td>

<td style="width: 6.34926%; padding: 4px; background-color: #121111; border-color: #666666; vertical-align: middle; height: 53px;"><span style="color: #ffffff;">000</span></td>

<td style="width: 9.22913%; padding: 4px; background-color: #121111; border-color: #666666; vertical-align: middle; height: 53px;">000000</td>

</tr>

<tr style="height: 52px;">

<td style="width: 17.7354%; padding: 4px; background-color: #121111; border-color: #666666; vertical-align: middle; height: 52px;">XXXXXXXXXXXXXXXXXXXXX</td>

<td style="width: 6.34926%; padding: 4px; background-color: #121111; border-color: #666666; vertical-align: middle; height: 52px;"><span style="color: #ffffff;">000</span></td>

<td style="width: 9.22913%; padding: 4px; background-color: #121111; border-color: #666666; vertical-align: middle; height: 52px;">000000</td>

</tr>

<tr style="height: 52px;">

<td style="width: 17.7354%; padding: 4px; background-color: #121111; border-color: #666666; vertical-align: middle; height: 52px;">XXXXXXXXXXXXXXXXXXXXX</td>

<td style="width: 6.34926%; padding: 4px; background-color: #121111; border-color: #666666; vertical-align: middle; height: 52px;">000</td>

<td style="width: 9.22913%; padding: 4px; background-color: #121111; border-color: #666666; vertical-align: middle; height: 52px;">000000</td>

</tr>

</tbody>

</table>

</div>

Many thanks!

Shannon

[shannonk922]

Hi! @BillBeebe 

Thanks for the help!

Here is a screenshot of the table with random filler text. I copied the code below too.

<div data-hs-responsive-table="true" style="overflow-x: auto; max-width: 100%; width: 60%; margin-left: auto; margin-right: auto; font-size: 14px;">

<table style="width: 100%; border-collapse: collapse; table-layout: fixed; border-color: #999999; height: 345px;">

<tbody>

<tr style="height: 77px;">

<td style="width: 17.7354%; padding: 4px; background-color: #121111; height: 77px; border-color: #666666; vertical-align: middle;"><span style="color: #3b958f;"><strong>XXXXX</strong></span></td>

<td style="width: 6.34926%; padding: 4px; background-color: #121111; height: 77px; border-color: #666666; vertical-align: middle;"><span style="color: #3b958f;"><strong>XXX</strong></span></td>

<td style="width: 9.22913%; padding: 4px; background-color: #121111; height: 77px; border-color: #666666; vertical-align: middle;"><span style="color: #3b958f;"><strong>XXXXXXX</strong></span></td>

</tr>

<tr style="height: 56px;">

<td style="width: 17.7354%; padding: 4px; background-color: #121111; height: 56px; border-color: #666666; vertical-align: middle;">XXXXXXXXXXXXXXXXXXXXXXXX</td>

<td style="width: 6.34926%; padding: 4px; background-color: #121111; height: 56px; border-color: #666666; vertical-align: middle;"><span style="color: #ffffff;">000</span></td>

<td style="width: 9.22913%; padding: 4px; background-color: #121111; height: 56px; border-color: #666666; vertical-align: middle;">000000</td>

</tr>

<tr style="height: 54px;">

<td style="width: 17.7354%; padding: 4px; background-color: #121111; border-color: #666666; vertical-align: middle; height: 54px;">XXXXXXXXXXXXXXXXXXXXXX</td>

<td style="width: 6.34926%; padding: 4px; background-color: #121111; border-color: #666666; vertical-align: middle; height: 54px;"><span style="color: #ffffff;">000</span></td>

<td style="width: 9.22913%; padding: 4px; background-color: #121111; border-color: #666666; vertical-align: middle; height: 54px;">000000</td>

</tr>

<tr style="height: 53px;">

<td style="width: 17.7354%; padding: 4px; background-color: #121111; border-color: #666666; vertical-align: middle; height: 53px;">XXXXXXXXXXXXXXXXXXXXX</td>

<td style="width: 6.34926%; padding: 4px; background-color: #121111; border-color: #666666; vertical-align: middle; height: 53px;"><span style="color: #ffffff;">000</span></td>

<td style="width: 9.22913%; padding: 4px; background-color: #121111; border-color: #666666; vertical-align: middle; height: 53px;">000000</td>

</tr>

<tr style="height: 52px;">

<td style="width: 17.7354%; padding: 4px; background-color: #121111; border-color: #666666; vertical-align: middle; height: 52px;">XXXXXXXXXXXXXXXXXXXXX</td>

<td style="width: 6.34926%; padding: 4px; background-color: #121111; border-color: #666666; vertical-align: middle; height: 52px;"><span style="color: #ffffff;">000</span></td>

<td style="width: 9.22913%; padding: 4px; background-color: #121111; border-color: #666666; vertical-align: middle; height: 52px;">000000</td>

</tr>

<tr style="height: 52px;">

<td style="width: 17.7354%; padding: 4px; background-color: #121111; border-color: #666666; vertical-align: middle; height: 52px;">XXXXXXXXXXXXXXXXXXXXX</td>

<td style="width: 6.34926%; padding: 4px; background-color: #121111; border-color: #666666; vertical-align: middle; height: 52px;">000</td>

<td style="width: 9.22913%; padding: 4px; background-color: #121111; border-color: #666666; vertical-align: middle; height: 52px;">000000</td>

</tr>

</tbody>

</table>

</div>