Adapter tableau en responsive

[Puma76]

Bonjour,

 

Je souhaite adapter mon tableau au format mobile, mais je ne trouve pas mon bonheur sur le web, si vous pouviez m'aider svp.

 

Voici mon code html :

<table style="width: 100%; border-collapse: collapse; margin-left: auto; margin-right: auto;" border="1">
<thead>
<tr>
<th style="background-color: #008080;" colspan="2"><strong style="color: #ffffff;">Titre 1<br /></strong></th>
<th style="background-color: #008080;" colspan="2"><strong style="color: #ffffff;">Titre 2<br /></strong></th>
</tr>
</thead>
<tbody>
<tr>
<td style="width: 25%; vertical-align: top; text-align: center;">Sous-titre A</td>
<td style="width: 25%; vertical-align: top; text-align: center;">Sous-titre B</td>
<td style="width: 25%; vertical-align: top; text-align: center;">Sous-titre A</td>
<td style="width: 25%; vertical-align: top; text-align: center;">Sous-titre B</td>
</tr>
<tr>
<td style="width: 25%; vertical-align: top; text-align: center;">Contenu 1
<h6 style="text-align: center;">(voir tableau "nos abonnements")</h6>
</td>
<td style="width: 25%; vertical-align: top; text-align: center;">Contenu 2
<h6 style="text-align: center;">(sur devis)</h6>
</td>
<td style="width: 25%; vertical-align: top; text-align: center;">Contenu 3
<h6 style="text-align: center;">(voir tableau "nos tarifs")</h6>
<p>+ 50% du prix</p>
</td>
<td style="width: 25%; vertical-align: top; text-align: center;">Contenu 4
<h6>(sur devis)</h6>
</td>
</tr>
</tbody>
</table>

Et j'aimerais cette disposition sur mobile :

 

Titre 1

Sous-titre A

- Contenu 1

Sous-titre B

- Contenu 2

Titre 2

Sous-titre A

- Contenu 3

Sous-titre B

- Contenu 4

 

Merci d'avance