[Table] Overflow pour un TD ?

**Johnbob** · 18/04/2007, 13h11

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.

**Oluha** · 18/04/2007, 14h08

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

**sedryk** · 18/04/2007, 14h11

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**Johnbob** · 18/04/2007, 15h00

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

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

**foolib** · 29/07/2010, 13h14

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[Table] Overflow pour un TD ?

Tableau en CSS

Vue hybride

Discussions similaires

Partager

Partager