28221 sujets

CSS et mise en forme, CSS3

Bonjour à tous,

Voilà la page où le probléme se pose tout d'abord.
Tableau redimensionnable
Je m'aperçois que mon tableau ne se redimensionne pas selon la resolution en 800*600 ou 640*480 ?

Pourtant le CSS est configure comme quoi la table est en % et devrait donc se redimensionner.

Voici le code de mon tableau en phase de test :

<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 :&quot;xxxxxxx</strong></td>
        </tr>
        <tr>
          <td>xxxxxxxxxxxxxxxxxxxxxxxxx</td>
          <td>xxxxxxxxxxxxxxxxxxxxx</td>
          <td>xxxxx</td>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
          <td>xx2</td>
          <td>10</td>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
          <td>HT</td>
        </tr>
        <tr>
          <td>xxxxxxxxxxxxxxxxxxxxxxxxxxx</td>
          <td>xxxxxxxxxxxxxxxxxxxx</td>
          <td>15 000</td>
          <td>3 750</td>
          <td>25</td>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
          <td>&nbsp;</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 source CSS :


#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;
}


Franchement si quelqu'un aurait la solution, elle serait la bienvenue car de nombreuses pages vont utiliser ce type de tableau afin de présenter des statistiques.

Merci à tous.
Modifié par doomer (27 Apr 2005 - 08:25)
Je viens d'essayer differente métthode :

- mettre le tableau dans un div puis donner une largeur auto et margin auto : ne fonctionne pas

- jouer avec les marges : ne fonctionne pas.

- J'ai repris l'article de OpenWeb avec la configuration CSS requise. J'ai testé avec leur tableau cela fonctionne mais avec le mien impossible. Ai-je trop de colonne ou le tableau est-il mal fait, je pense pas ?

Quelq'un a t'il une idée ?
J'ai essayé avec width:100%.
Mais en vain. Cela ne fonctionne pas.
Je trouve cela bizarre.
Le tableau garde toujours sa taille normal de 100%.

Quelqu'un a t'il eu ce probléme ?

Edit [20h50] Je viens de rajouter une page test juste avec le tableau pour tester si cela ne venait pas de mes positionnements en CSS et non :
La page test est : Page de test sans les menus et header
Modifié le 09 Jan 2005 - 20:51
Je viens de rajouter un lien dans lepost du dessus pour vous montrer le probléme quand on redimensionne.

Comportement bizarre, le 2 éme se redimensionne bien mais le 1er nom.

Page de test sans les menus et header
Est ce que c'est au colspan et rowspan ??? Smiley decu
Modifié le 09 Jan 2005 - 21:19
À ce que je peux voir, il n'y a aucun problème dans ce tableau.

Tu ne peux pas réduire la fenêtre indéfiniment sans un jour avoir à scroller si tu as du contenu dans tes colonnes. Les mots comme xxxxxxxxxxx ne vont pas se couper en deux !

À moins que je n'ais rien compris...
Cela veut dire, que mon contenu dans les cellules ne peuvent pas passer à la ligne dans un e même cellule, même si on dimensionne les cellules avec des % ?

C'est bizarre cela. Ce n'est pas si accessible que cela les tableaux.
Peut on forcer le passage à la ligne en ce qui concerne le contenu d'une cellule ?

Je sais que l'on peut l'empêcher mais pour forcer le passage, je ne sais pas.
Administrateur
a écrit :
Ce n'est pas si accessible que cela les tableaux.

Ah oui, c'est même tout le contraire en général.

a écrit :
Cela veut dire, que mon contenu dans les cellules ne peuvent pas passer à la ligne dans un e même cellule, même si on dimensionne les cellules avec des % ?

Oui, une petite recherche en passant :
http://forum.alsacreations.com/topic.php?fid=4&tid=962
http://forum.alsacreations.com/topic.php?fid=4&tid=1191&p=1

;)

a écrit :
Peut on forcer le passage à la ligne en ce qui concerne le contenu d'une cellule ?

Un "mot" ne peut pas être coupé et passer à la ligne.
Tu peux éventuellement cacher le texte qui dépasse à l'aide de la propriété overflow.