How can I make my HTML table responsive for mobile viewing?

Solved

How can I make my HTML table responsive for mobile viewing?

SaraCicchinelli
Shopify Partner
4 0 1

Hi, I have a question, I'm creating my company's website, it's not online yet, only preview.

 

I have this table

 

<table style="width: 680px; height: 242px; border-radius: 20px;">

<tbody>

<tr>

<td style="width: 670px; background-color: #e8e8e8;" colspan="2"><strong> CARATTERISTICHE DEL PRODOTTO</strong></td>

</tr>

<tr>

<td style="width: 187.625px;"><em><strong>Materiale </strong></em></td>

<td style="width: 476.375px; text-align: left;">Poliestere Nautico 120g</td>

</tr>

<tr>

<td style="width: 187.625px;"><em><strong>Limite dimensione </strong></em></td>

<td style="width: 476.375px; text-align: left;">

<p style="text-align: left;">-</p>

</td>

</tr>

<tr>

<td style="width: 187.625px;"><em><strong>Uso esterno</strong></em></td>

<td style="width: 476.375px; text-align: left;">Sì</td>

</tr>

<tr>

<td style="width: 187.625px;"><em><strong>Tecnica di stampa </strong></em></td>

<td style="width: 476.375px; text-align: left;">Stampa In Sublimazione - Inchiostri Certificati</td>

</tr>

</tbody>

</table>

 

on my product page, in an html section.

I would like the text in the table to wrap when in mobile mode, so as not to have the scrollbar that I don't like, while it is entirely visible in desktop mode, what do I do?

Schermata 2024-03-05 alle 10.56.04.pngSchermata 2024-03-05 alle 10.57.11.png

Accepted Solution (1)

devmont-digital
Shopify Partner
165 33 42

This is an accepted solution.

Hello @SaraCicchinelli,

The problem arises from the inline CSS applied to the table, which hinders its responsiveness on mobile screens. I've removed all the widths you previously set. Please try the updated code.

<table style="margin: 0 20px;">

  <tbody>
    <tr>
      <td style="background-color: #e8e8e8; " colspan="2"><strong> CARATTERISTICHE DEL PRODOTTO</strong></td>
    </tr>

    <tr>
      <td><em><strong>Materiale </strong></em></td>
      <td style="text-align: left;">Poliestere Nautico 120g</td>
    </tr>

    <tr>
      <td <em><strong>Limite dimensione </strong></em></td>
      <td style="text-align: left;">
        <p style="text-align: left;">-</p></td>
    </tr>

    <tr>
      <td ><em><strong>Uso esterno</strong></em></td>
      <td style="text-align: left;">Sì</td>
    </tr>

    <tr>
      <td ><em><strong>Tecnica di stampa </strong></em></td>
      <td style="text-align: left;">Stampa In Sublimazione - Inchiostri Certificati</td>
    </tr>

  </tbody>

</table>

 

Found our answer helpful? If so, Don't forget to show your support by liking and accepting the solution.
Looking for more help and expert consultation? Feel free to contact us at Shopify Expert or visit our website www.devmontdigital.io
Hire us for your project by simply emailing us at sales@devmontdigital.io

View solution in original post

Reply 1 (1)

devmont-digital
Shopify Partner
165 33 42

This is an accepted solution.

Hello @SaraCicchinelli,

The problem arises from the inline CSS applied to the table, which hinders its responsiveness on mobile screens. I've removed all the widths you previously set. Please try the updated code.

<table style="margin: 0 20px;">

  <tbody>
    <tr>
      <td style="background-color: #e8e8e8; " colspan="2"><strong> CARATTERISTICHE DEL PRODOTTO</strong></td>
    </tr>

    <tr>
      <td><em><strong>Materiale </strong></em></td>
      <td style="text-align: left;">Poliestere Nautico 120g</td>
    </tr>

    <tr>
      <td <em><strong>Limite dimensione </strong></em></td>
      <td style="text-align: left;">
        <p style="text-align: left;">-</p></td>
    </tr>

    <tr>
      <td ><em><strong>Uso esterno</strong></em></td>
      <td style="text-align: left;">Sì</td>
    </tr>

    <tr>
      <td ><em><strong>Tecnica di stampa </strong></em></td>
      <td style="text-align: left;">Stampa In Sublimazione - Inchiostri Certificati</td>
    </tr>

  </tbody>

</table>

 

Found our answer helpful? If so, Don't forget to show your support by liking and accepting the solution.
Looking for more help and expert consultation? Feel free to contact us at Shopify Expert or visit our website www.devmontdigital.io
Hire us for your project by simply emailing us at sales@devmontdigital.io