boutons et retour à la ligne dans un tableau

**cboudy** · 11/12/2009, 15h51

bonjour,
j'ai un problème de rendu sous Internet Explorer avec le code suivant :

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
<html>
<body>
<style type="text/css">
 table { border-width:1px; border-style:solid;border-color:black;}
 table td { border-width:1px; border-style:solid;border-color:red; word-wrap:break-word;}
</style>
<table><tbody>
<tr><td>
 <button>Button 0</button> <button>Button 1</button> <button>Button 2</button>
 <button>Button 3</button> <button>Button 4</button> <button>Button 5</button>
 <button>Button 6</button> <button>Button 7</button> <button>Button 8</button>
 <button>Button 9</button> <button>Button 0</button> <button>Button 1</button>
 <button>Button 2</button> <button>Button 3</button> <button>Button 4</button>
 <button>Button 5</button> <button>Button 6</button> <button>Button 7</button>
 <button>Button 8</button> <button>Button 9</button> <button>Button 0</button>
 <button>Button 1</button> <button>Button 2</button> <button>Button 3</button>
</td></tr>
</tbody></table>
</body>
</html>

sous firefox et opera, le navigateur limite la largeur de la cellule à la taille de la page et effectue des sauts de ligne automatiquement
par contre ie s'obstine à mettre tous les boutons sur une seule ligne
j'ai beau me battre avec word-wrap, ça ne donne rien
quelqu'un a t'il la solution ?

**pop_up** · 11/12/2009, 16h11

règle fondamentale :

mettre un doctype à ta page

ça marchera mieux

Actuellement, tu n'as pas de doctype donc tu passe en mode quirks

**cboudy** · 11/12/2009, 16h53

ok merci, j'avais perdu des morceaux en nettoyant mon exemple,
je rajoute les doctype, head, title mais ça bug encore :

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-us" xml:lang="en-us" >
<head>
<title> Table Button Wrap </title>
<style type="text/css">
 table { border-width:1px; border-style:solid;border-color:black;}
 table tr td { border-width:1px; border-style:solid;border-color:red;}
 button { padding: 0em; margin: 0; }
</style>
</head>
<body>
<table>
<tr><td>
 <button>Button A</button> <button>Button 1</button> <button>Button 2</button>
 <button>Button 3</button> <button>Button 4</button> <button>Button 5</button>
 <button>Button 6</button> <button>Button 7</button> <button>Button 8</button>
 <button>Button 9</button> <button>Button 0</button> <button>Button 1</button>
 <button>Button 2</button> <button>Button 3</button> <button>Button 4</button>
 <button>Button 5</button> <button>Button 6</button> <button>Button 7</button>
 <button>Button 8</button> <button>Button 9</button> <button>Button 0</button>
 <button>Button 1</button> <button>Button 2</button> <button>Button 3</button>
</td></tr>
</table>
</body>
</html>

**O-Zone** · 11/12/2009, 17h10

Utilise des div au lieu d'un tableau :

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-us" xml:lang="en-us" >
<head>
<title> Table Button Wrap </title>
<style type="text/css">
 .div1 { border-width:1px; border-style:solid;border-color:black;}
 .div2 { border-width:1px; border-style:solid;border-color:red;}
 button { padding: 0em; margin: 0; }
</style>
</head>
<body>
<div class="div1">
	<div class="div2">
	 <button>Button A</button> <button>Button 1</button> <button>Button 2</button>
	 <button>Button 3</button> <button>Button 4</button> <button>Button 5</button>
	 <button>Button 6</button> <button>Button 7</button> <button>Button 8</button>
	 <button>Button 9</button> <button>Button 0</button> <button>Button 1</button>
	 <button>Button 2</button> <button>Button 3</button> <button>Button 4</button>
	 <button>Button 5</button> <button>Button 6</button> <button>Button 7</button>
	 <button>Button 8</button> <button>Button 9</button> <button>Button 0</button>
	 <button>Button 1</button> <button>Button 2</button> <button>Button 3</button>
	</div>
</div>
</body>
</html>

**cboudy** · 14/12/2009, 11h39

parfait! merci

boutons et retour à la ligne dans un tableau

Tableau en CSS

Vue hybride

Discussions similaires

Partager

Partager