problema con table responsive

[franzauriol]

Salve,

devo creare una tabella con delle immagini e sopra del testo. Questo il codice:

<table style="height: 218px;" width="886">
<tbody>
<tr style="height: 210px;">
<td style="background-image: url('images/Foto/Servizi/carta-box1.jpg'); background-repeat: no-repeat; width: 210px; height: 210px; text-align: center;">
<p><span style="color: #ffffff; font-size: 150%;">FORNIAMO <br /><br />INOLTRE:</span></p>
</td>
<td style="background-image: url('images/Foto/Servizi/materiali-box1.jpg'); background-repeat: no-repeat; width: 210px; height: 210px; text-align: center;">
<ul>
<li style="text-align: left;"><span style="color: #000000; font-size: 100%;">Servizio di noleggio Cassoni con e senza coperchio, di Presse Compattatrici scarrabili e stazionarie e di Autogru</span></li>
</ul>
</td>
<td style="background-image: url('images/Foto/Servizi/materiali-box1.jpg'); background-repeat: no-repeat; width: 210px; height: 210px; text-align: center;">
<ul>
<li style="text-align: left;"><span style="color: #000000; font-size: 100%;">Servizi di Demolizione Industriale</span></li>
</ul>
</td>
<td style="background-image: url('images/Foto/Servizi/materiali-box1.jpg'); background-repeat: no-repeat; width: 210px; height: 210px; text-align: center;">
<ul>
<li style="text-align: left;"><span style="color: #000000; font-size: 100%;">Servizi di Pulizia Industriale</span></li>
</ul>
</td>
</tr>
</tbody>
</table>

su mobile, la tabella mi esce tagliata se il telefono è in verticale, mentre non ho problemi con il dispositivo in orizzontale.
Come posso risolvere?

grazie mille

 

[Max 1]

Prova ad usare tutte le misure in percentuale