overflow et table-layout avec IE et FF
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:
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:
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
