[Table] Overflow pour un TD ?

Bonjour.

Est-il possible de fixer une largeur et une hauteur de TD de façon à ce que le texte soit coupé lorsqu'il est trop grand ?

Plus précisément avec du CSS, sans faire une usine à gaz avec des divs dans chaque TD.

:merci:

à ma connaissance on ne peut le faire que sur des <div> :?

Bonjour Jung,

Malheureusement pour toi, les tables ne sont pas réellement faite conserver une taille fixe quelques soient leurs contenus.

Il existe cependant un moyen de s'assurer que la largeur fixée reste toujours la même. Cette technique marche correctement sur IE et FF.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 
<html>
<head>
<title>Table de taille fixe</title>
</head>
<body>
   <table style="width:600px;table-layout:fixed;border-collapse: collapse;">
      <tr>
         <td style="text-overflow:ellipsis;overflow:hidden;width:25%;white-space:nowrap;border:1px solid #444;">Ceci est une phrase vraiement longue</td>
         <td style="text-overflow:ellipsis;overflow:hidden;white-space:nowrap;width:25%;border:1px solid #444;">Ceci est une phrase vraiement longue</td>
         <td style="text-overflow:ellipsis;overflow:hidden;white-space:nowrap;width:25%;border:1px solid #444;">Ceci est une phrase vraiement longue</td>
         <td style="text-overflow:ellipsis;overflow:hidden;white-space:nowrap;width:25%;border:1px solid #444;">Ceci est une phrase vraiement longue</td>
      </tr>	
   </table>
</body>
</html>

Seul IE reconnait "text-overflow:ellipsis"

Si tu supprimes le "white-space:nowrap", seul IE te permettra de fixer une hauteur qui ne sera pas dépassée.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 
<html>
<head>
<title>Table de taille fixe</title>
</head>
<body>
   <table style="width:600px;table-layout:fixed;border-collapse: collapse;">
      <tr>
         <td style="text-overflow:ellipsis;overflow:hidden;height:30px;width:25%;border:1px solid #444;">Ceci est une phrase vraiement longue</td>
         <td style="text-overflow:ellipsis;overflow:hidden;height:30px;width:25%;border:1px solid #444;">Ceci est une phrase vraiement longue</td>
         <td style="text-overflow:ellipsis;overflow:hidden;height:30px;width:25%;border:1px solid #444;">Ceci est une phrase vraiement longue</td>
         <td style="text-overflow:ellipsis;overflow:hidden;height:30px;width:25%;border:1px solid #444;">Ceci est une phrase vraiement longue</td>
      </tr>	
   </table>
</body>
</html>

La meilleur façon de faire reste de mettre une div dans chaque td avec une hauteur et une largeur fixe et un "overflow:hidden".

Bon courage

:yaisse: :hola:

Génial, ça fonctionne très bien !

(j'ai la "chance" de n'avoir à développer que pour IE 6)

:merci:

6 ans après ...

Pour ce problème, j'ai mis le contenu du td dans un div

Code:

#mondiv{overflow:hidden; width:100%; height:16px}