overflow et table-layout avec IE et FF

**nihaoma** · 25/01/2007, 12h04

Bonjour à tous
Ne parvenant pas à résoudre un problème de différence de comportement entre IE et FF, j'ai décider de vous soumettre le pb dans l'espoir d'avoir un peu d'aide.

Présentation:
J'essais de faire en sorte que dans un TABLE, le contenu des cases d'une meme colonne ne change pas la taille de la colonne quand elle est fixé. J'entend par là, que si par exemple je fixe la taille de ma colonne à 100px; et que dans une des lignes sous cette colonne, un texte dépasse ces 100px, alors je veux que le texte soit tronqué. Pour ce faire, j'ai fais ce petit bout de code:

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
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
 
 
<html>
  <head>
    <link rel="stylesheet" href="./style.css">
   </head>
   <body>    
 
 
    <table border="0" cellspacing="0" cellpadding="0" class="tbl">
    	<tbody>
    	<tr>
    		<td class="tds" style="width:50px;">Colonne1</td>
    		<td class="tds" style="width:70px;">Colonne2</td>
    		<td class="tds" style="width:50px;">Colonne3</td>
    	</tr>
    	<tr>
    		<td class="tds">Texte dans la colonne 1</td>
    		<td class="tds">Texte dans la colonne 1</td>
    		<td class="tds">Texte dans la colonne 1</td>
    	</tr>
    	<tr>
    		<td class="tds">Texte dans la colonne 2</td>
    		<td class="tds">Texte dans la colonne 2</td>
    		<td class="tds">Texte dans la colonne 2</td>
 
    	</tr>
    	<tr>
    		<td class="tds">Texte dans la colonne 3</td>
    		<td class="tds">Texte dans la colonne 3</td>
    		<td class="tds">Texte dans la colonne 3</td>
    	</tr>
    	</tbody>	
    </table>
 
  </body>
</html>

le contenu du fichier style.css étant celui-ci:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 
.tbl {
	table-layout:fixed;
	 }
 
 
.tds {
	border-bottom: 1px dashed #333;
	padding: 0px 0px;
	text-overflow:ellipsis;
	overflow:hidden;
	white-space:nowrap;
 }

Sous IE, ca fonctionne (enfin presque, car si je remplace "Colonne1" par "Colonne 1", il me tronque bien le mot "Colonne", mais met à la ligne le "1" !!), par contre, sous FF, il s'en fiche complètement, le texte est affiché en entier et donc la taille des colonnes n'a plus rien à avoir avec ce qui est fixé.

Je précise que j'ai besoin de n'avoir à agir que sur 1 seule valeur par colonne...en effet, j'ai fais des testes en mettant par exemple des div pour chaque "case", ca fonctionne, toutefois, j'ai besoin de changer les taille dynamiquement, cela foudrait donc dire que je devrais change la taille de toutes les div pour une colonne donnée...ce qui est ingérable dans mon code.

merci par avance pour votre aide.

NiHaoMa

**E.Bzz** · 25/01/2007, 12h33

Bonjour,
trouvé ça sur le sujet ...

A+

**nihaoma** · 25/01/2007, 12h39

Re,

merci E.Bzz de ta réponse, toutefois, la seule différence que le topic dont tu parles apporte, est de fixer une taille directement dans le style. D'une part, après avoir essayer, ca ne change toujours rien sous FF, et d'autre part, meme si ca fonctionnait, comment faire pour changer par le code cette taille ?

en tous cas merci d'avoir prit le temps de lire ma question

NiHaoMa

overflow et table-layout avec IE et FF

JavaScript

Discussions similaires

Partager

Partager