28172 sujets

CSS et mise en forme, CSS3

Fixer la taille d'un TD

Salut à tous ...
j'ai un petit problème ... je voudrai faire en sorte de fixer la taille de mes TD de manière ferme et définitive... c'est à dire que si le contenu est plus grand que la taille donnée il soit tronqué ou qu'un ascenseur apparaisse dans la cellule .... mais que sa taille reste au pixel près celle que je lui ait donné !

par exemple sur ce tableau je voudrais que tous mes TD à l'affichage fassent 200px ... peu importe la taille du contenu...
mais par exemple là ça n'est pas le cas


<table width="400" border="1" cellspacing="4" cellpadding="2">
  <tr>
    <td width="200" bgcolor="#CCCCCC">qrgqzrgqzrgq</td>
    <td width="200" bgcolor="#CCCCCC">qsrgqzrgqzrg</td>
  </tr>
</table>
<table width="400" border="1" cellspacing="4" cellpadding="2">
  <tr>
    <td width="200">qrgqzrgqzrgqqzrgqzrgqzrgqzrg</td>
    <td width="200">qsrgqzrgqzrgedtgsqergqergqzrgqzrgqzrgqzrg</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>

Si vous avez une idée .... merci beaucoup Smiley smile
Hello,

Tu n'as jamais pensé à utiliser les feuilles de style ?

Par exemple ton premier tableau deviendrait :
HTML

<table id="tab">
     <tr>
          <td>Bla bla</td>
          <td>Bla bla</td>
     </tr>
</table>

CSS

table#tab {
border:1px;
width:400px;
border-spacing:4px; /* équivalent cellspacing (ne fonctionne pas sur IE) */}

table#tab td {
background-color:#ccc;
padding:2px; /* équivalent cellpadding */
width:200px;
overflow:auto; /* si ça dépasse on affiche la scrollbar */ }

Tu peux aussi utiliser overflow:hidden à la place de overflow:auto (pas d'ascenseur, le contenu qui dépasse sera tronqué).
Modifié par BeliG (20 May 2008 - 16:26)
Merci pour la réponse ...
bien sur que j'ai déjà pensé à utiliser les feuilles de style ... et que j'ai déjà testé le overflow ....
la solution que tu proposes ne marche ni sur IE6/7 ni sur FF dès que le contenu est un peu grand ... (cf ci dessous)
merci tout de même d'avoir répondu Smiley smile 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
<title>Untitled Document</title>
<style>
table#tab {

border:1px;

width:400px;

border-spacing:4px; /* équivalent cellspacing (ne fonctionne pas sur IE) */
}



table#tab td {

background-color:#ccc;

padding:2px; /* équivalent cellpadding */

width:200px;

overflow:auto; /* si ça dépasse on affiche la scrollbar */ 
}
</style>
</head>

<body>
<table id="tab">

     <tr>

          <td>Bla bla</td>

          <td>Bla blawsdfgswrfgsqwrgfqswrgfqwsrgfqsrwfgqswrgfqwsrfgqwsrgfqwsrgfqwsrgfqwsrtgf</td>

     </tr>

</table>
</body>
</html>

Modifié par NAS (23 May 2008 - 10:48)
Bonjour NAS,

Il ne me semble pas qu'il soit possible d'ajouter un ascenceur une cellule de tableau, tu peux par contre tout à fait imposer des dimensions (largeur et hauteur) à ces dernières (de manière général ou en particulier via une classe ou un id) mais il me semble que la cellule s'adapte au contenu (retour à la ligne lorsqu'il n'y pas suffisemment de place) et que sa hauteur s'adapte pour pouvoir afficher tout ce qu'elle contient...sic...
Si tu souhaites qu'un texte puisse être scrollé dans ta cellule, il suffit d'y placer un conteneur (une div par exemple) et de lui appliquer les styles qui t'interessent (Overflow, dimension (Largeur/Hauteur) etc...)

C'est mon point de vue, je le partage. Smiley cligne
Cdt,
Sylvain
yesss ! là ça marche Smiley smile j'y avais pas pensé tu vois ... comme quoi des fois ...
merci

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
<title>Untitled Document</title>
<style>
table#tab {

border:1px;

width:400px;

border-spacing:4px; /* équivalent cellspacing (ne fonctionne pas sur IE) */
}



table#tab td {


}
.scroll {background-color:#ccc;

padding:2px; /* équivalent cellpadding */

width:200px;

overflow:auto; /* si ça dépasse on affiche la scrollbar */ 
}
</style>
</head>

<body>
<table id="tab">

     <tr>

          <td><div class="scroll">Bla bla</div></td>

          <td><div class="scroll">Bla blawsdfgswrfgsqwrgfqswrgfqwsrgfqsrwfgqswrgfqwsrfgqwsrgfqwsrgfqwsrgfqwsrtgf</div></td>

     </tr>

</table>
</body>
</html>
Sujet clos
Aller à