Overflow dans les td fusionnées d'un tableau.

Version imprimable

Bonjour,

Je souhaite tronquer le texte d'une div située dans des cellules fusionnées d'un tableau. Le code suivant marche sur Firefox mais pas sous IE8: Le texte est bien tronqué mais les cellules fusionnées prennent la largeur du texte.

Voila le résultat sur firefox

http://hfr-rehost.net/http://self/pi...5c573e92fc.png

Et sur IE8:

http://hfr-rehost.net/http://self/pi...2149562510.png

Quelqu'un a une solution?

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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<meta content="IE=8" http-equiv="X-UA-Compatible"/>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
  <head>
    <title>Planning</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
 
	<style media="all" type="text/css">
		td
		{
			border: 1px solid black;
		}
 
		.workingDay
		{
			width: 16px;
			max-width: 16px;
		}
 
		td > div
		{
			overflow: hidden;
			max-height: 15px;
		}
 
	</style>
  </head>
  <body>
    <table summary="Test">
      <colgroup>
        <col span="5" class="workingDay" />
      </colgroup>
      <tbody>
        <tr>
          <td colspan="2">
            <div style="max-width: 32px;">AAAAAAAAAAAAAAAAAAAAAAA</div>
          </td>
          <td>
            <div> </div>
          </td>
          <td>
            <div> </div>
          </td>
          <td>
            <div> </div>
          </td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

Merci d'avance de votre aide

Bon j'ai trouvé la solution.

Il s'agit d'utiliser la propriété

Code:

-ms-word-break: break-all;

pour forcer le passage à la ligne des carctère et un overflow avec un max-height pour cacher le passage.

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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
  <head>
    <title>Planning</title>
	<meta content="IE=8" http-equiv="X-UA-Compatible"/>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
 
	<style media="all" type="text/css">
 
		table
		{
			table-layout: fixed;
		}
 
		td
		{
			border: 1px solid black;
		}
 
		.workingDay
		{
			width: 16px;
			max-width: 16px;
		}
 
		td > div
		{
			max-height: 15px;
			border: 1px solid red;
			overflow: hidden;
		}
 
		td
		{
			-ms-word-break: break-all;	/*IE*/
		}
 
	</style>
  </head>
  <body>
    <table summary="Footer du planning">
      <colgroup>
        <col span="5" class="workingDay" />
      </colgroup>
      <tbody>
        <tr>
          <td colspan="2" style="max-width: 32px;">
            <div>AAAAAAAAAAAAAAAAAAAAAAA</div>
          </td>
		  <td colspan="2" style="max-width: 32px;">
			<div>tfkjdfkdjfkdjfkdjfkdjfkdjfkdjfkdjfk djfkdj kfjdkfjdkfjdkf jdkfjdkjfkdjf dkjfkdjfkdjf</div>
		  </td>
          <td>
            <div> </div>
          </td>
          <td>
            <div> </div>
          </td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

07/05/2010, 10h26
Yorick

Merci d'avoir relayer la solution.