Voilà j'ai un tableau dans une page et je voudrais qu'il s'étire ou se réduise à volonté selon la résolution de l'écran mais voilà cela ne fonctionne pas
La page concernée est la suivante : Essai de tableau
Le source XHTML :
CODE
<div id="essai">
<table border="1" cellspacing="1" cellpadding="1" summary="Consultez le tableau">
<caption>
ESSAI DE TABLEAU REDIMENSIONNABLE PAR RAPPORT AU NAVIGATEUR
</caption>
<tr>
<td colspan="10"><strong>TEST DE TABLEAU APRES REDIMENSIONNEMNT </strong></td>
</tr>
<tr>
<td rowspan="2">Essai</td>
<td rowspan="2">Essai</td>
<td rowspan="2">EssaiEssaiEssa</td>
<td colspan="2">xxxx</td>
<td colspan="2">xxxx</td>
<td colspan="2">xxxxxxxx</td>
<td rowspan="2">Remarques</td>
</tr>
<tr >
<td>xxxxxxxxxxxx</td>
<td>%</td>
<td>xxxxxxxxxxxx</td>
<td>%</td>
<td>xxxxxxxxxxxx</td>
<td>%</td>
</tr>
<tr >
<td colspan="10"><strong>ccccccccccccccccccccccccccccc</strong></td>
</tr>
<tr>
<td colspan="10"><strong>cccccccccccc/2 :"xxxxxxx</strong></td>
</tr>
<tr>
<td>xxxxxxxxxxxxxxxxxxxxxxxxx</td>
<td>xxxxxxxxxxxxxxxxxxxxx</td>
<td>xxxxx</td>
<td> </td>
<td> </td>
<td>xx2</td>
<td>10</td>
<td> </td>
<td> </td>
<td>HT</td>
</tr>
<tr>
<td>xxxxxxxxxxxxxxxxxxxxxxxxxxx</td>
<td>xxxxxxxxxxxxxxxxxxxx</td>
<td>15 000</td>
<td>3 750</td>
<td>25</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td>Exxxxx</td>
</tr>
<tr>
<td colspan="2">ccccccccccccccccccccccccc</td>
<td>396 122</td>
<td colspan="2">3 750</td>
<td colspan="2">38 112</td>
<td colspan="2">0</td>
<td>41 862</td>
</tr>
<tr>
<td colspan="2">cccccccccccccccccccc</td>
<td>396 122</td>
<td colspan="2">3 750</td>
<td colspan="2">38 112</td>
<td colspan="2">0</td>
<td>41 862</td>
</tr>
<tr>
<td colspan="2"><strong>Pour information</strong></td>
</tr>
<tr>
<td><strong>Pxx</strong></td>
<td><strong>xxxxxxxxxx</strong></td>
</tr>
<tr>
<td><strong>5xxxxxx</strong></td>
<td><strong>1xxxxxxxxxxxxxxx</strong></td>
</tr>
<tr>
<td><strong>Rexxxxxx</strong></td>
<td><strong>1 xxxxxxxxxxxxx </strong></td>
</tr>
</table>
</div>
Le code CSS repris sur openweb et modifié :
CODE
#essai table {
border:3px solid #000000;
border-collapse:collapse;
width:auto;
margin-left:0em;
margin-right:2em;
text-align:center;
}
#essai thead,#essai tfoot {
background-color:#cccccc;
border:1px solid #ffcc33;
}
#essai tbody {
background-color:#FFFFFF;
border:1px solid #ffcc33;
}
#essai th {
font-family: 80% "Times New Roman", Times, serif;
border:1px dotted #ffcc33;
padding:5px;
background-color:#cccccc;
width:25%;
}
#essai td {
font-family:sans-serif;
font-size:80%;
border:1px solid #ff6600;
padding:5px;
text-align:center;
}
#essai caption {
font-family: "Times New Roman", Times, serif;
font-weight:bold;
border-bottom:1px solid #ff6600;
margin-bottom:10px;
width:auto;
margin-left:2em;
margin-right:2em;
text-align:center;
}
Je viens d'essayer differente méthode :
- mettre le tableau dans un div puis donner une largeur auto et margin auto : ne fonctionne pas
- jouer avec les marges : ne fonctionne pas.
Si quelqu'un à la solution, ce serait pas mal car de nombreuses de mes pages vont utiliser ce type de tableau pour des statistiques
