Tableau qui ne se redimensionne pas

[doomer2]

Bonsoir à tous,

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 :

<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é :

#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

[Dan]

Doomer2,

Merci de nous éviter le code kilométrique avec double interligne.

Le rôle des modos n'est pas de corriger la mise en page pour qu'elle soit au moins lisible.

J'ai corrigé ton post. La prochaine fois il passe à la trappe

Dan

[doomer2]

OK, je suis désolé de ce petit probléme

Je viens de rajouter une page test sans le header, les menus :

Page de test sans le header et menus

Modifié 9 Janvier 2005 par doomer2

[thierryf]

Bonjour Doomer,

L'utilisation des tableaux est-elle vraiment nécessaire pour ta présentation ?

Tu dois savoir que le (X)HTML et le CSS ont été crée pour clarifier un peu les codes et permettre une meilleure interopérabilité dans les navigateurs.

Cela devait mettre un termes à une certaine forme de "bricolage" de la part des codeurs.

Or que se passe-t-il ?

Certains webmasters connaissant le HTML, ne veulent remettre en cause leur connaissance pour passer au HTML/CSS mais utilisent quand même les possibilités des feuilles de style.

Résultat, on obtient des codes encore plus bordélique qu'avant. Mélangeant tableaux avec attributs, déclaration de style n'importe où... etc.

C'est ce que tu es en train de faire.

Pourquoi y a-t-il dans ton tableau l'attribut border="1" et dans ton style

#essai table{border:3px...} ?

Quel taille de bordure veux-tu exactement pour ton tableau ?

Le navigateur ne comprend rien, la personne qui relit ton code ne comprend rien, et, toi même, je suis sûr que tu ne t'y retrouves plus.

Recommence tout sans les tableaux. En cas de difficultés, je sûr que tu trouveras de l'aide sur ce forum.

Si tu ne peux te passer des tableaux. Dans ce cas, essaie de suivre la règle suivante : aucun attribut dans tes balises, tu gère le maximum dans ta feuille de style.

Bon courage.

[thierryf]

J'oublie de répondre à ta question.

Pour avoir des taleaux ou de div dont la taille s'adapte à la réolution de l'écran,on utilise des valeurs relatives. Width exprimé en pourcentage.