Bonjour,
Je travaille actuellement sur un site Web usant les medias queries et pour l'instant tout va bien.
Le seul problème est que j'essaie de passer un tableaux en mode colonne.
À la base, tout va bien, le tableau se met bien en colonne en passant ses divers éléments en "display: block".
Cependant, il me laisse alors de gros espaces entre les cellules (et étrangement, l'espacement de mes paragraphes contenus dans une cellule augmente également...)
Je n'ai jamais travaillé énormément avec les tableaux, alors j'ai sûrement loupé quelque chose...
Le site est en ligne à l'adresse suivante: http://www.sadp411.com/dev/lescan/fr/siteweb.php
Et voici un extrait du code :
(ref se rapportant à l'organisation de la feuille de style complète)
Merci d'avance ! Et si vous avez d'autres techniques que vous utilisez vous-même sur vos tableaux lorsque passés en mode mobile, je suis également preneur
Je travaille actuellement sur un site Web usant les medias queries et pour l'instant tout va bien.
Le seul problème est que j'essaie de passer un tableaux en mode colonne.
À la base, tout va bien, le tableau se met bien en colonne en passant ses divers éléments en "display: block".
Cependant, il me laisse alors de gros espaces entre les cellules (et étrangement, l'espacement de mes paragraphes contenus dans une cellule augmente également...)
Je n'ai jamais travaillé énormément avec les tableaux, alors j'ai sûrement loupé quelque chose...
Le site est en ligne à l'adresse suivante: http://www.sadp411.com/dev/lescan/fr/siteweb.php
Et voici un extrait du code :
<table>
<tr>
<th>Liaison Paypal</th>
<td>$</td>
<td>
<p>
Paypal est le système le plus répandu de paiement en ligne (notamment utilisé par Ebay).
</p>
<p>
Si vous n'avez pas besoin d'un système de paiement en ligne constant, une simple liaison entre une facture paypal et votre site suffira amplement.
</p>
</td>
</tr>
<tr>
<th>Module E-Commerce</th>
<td>$$</td>
<td>
<p>
Si vous avez besoin d'un petit système de vente en ligne, l'installation d'un module d'e-commerce est une solution adapté et moins coûteuse qu'un site dédié au commerce électronique.
</p>
</td>
</tr>
<tr>
<th>Site E-Commerce</th>
<td>$$$</td>
<td>
<p>
Système E-commerce complet sur un site qui lui est dédié. Peut gérer un fort volume de transaction.
</p>
</td>
</tr>
</table>
/* Section du RESET (ref 1) */
table{
border-collapse: collapse;
border-spacing: 0;
}
/* Section Table pas mobile (ref 7.2) */
table,
table td,
table th{
border: 1px solid #444;
text-align: center;
vertical-align: middle;
}
table th{
font-weight: bold;
padding: 3px;
}
table tr td:first-of-type{
width: 50px;
}
/* Section Table dans media querie (ref 9.2.4) */
table,
table td,
table th{
display: block;
border: none;
margin: 0;
padding: 0;
height: inherit;
}
table tr{
margin: 5px 0;
display: block;
border: 1px solid #444;
}
table tr td:first-of-type{
width: auto;
}
table p{
padding: 0 5px !important;
margin: 0 !important;
}
(ref se rapportant à l'organisation de la feuille de style complète)
Merci d'avance ! Et si vous avez d'autres techniques que vous utilisez vous-même sur vos tableaux lorsque passés en mode mobile, je suis également preneur
