Discussion :

[bhj2000]

Bonjour,
Comment je peux faire pour que floatDiv apparaisse par dessus de la cellule qui le contient et prend 200% de sa taille. Elle doit rester en 25% elle aussi.

Merci de votre aide

Code html :

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
<br/>
<table style="border:1px red solid;width:100%">
	<tr>
		<td style="width:25%">
			<div id="floatDiv" style="width=200%; border:1px gray solid;">
				<table>
					<tr>
						<td style="width=50%">toto</td>
						<td style="width=50%">toto</td>
					</tr>
				</table>
			</div>
		</td>
		<td style="width:25%">cell</td>
		<td style="width:25%">cell</td>
		<td style="width:25%">cell</td>
	</tr>
</table>

[Invité]

Bonjour,
position:absolute; ?

[bhj2000]

Si je mets le div en absolute, les 200% pour sa width se calculent par rapport au document et non pas par rapport à la cellule parente.
Je voudrais que le div garde sa place dans la cellule mais la dépasse (2 fois sa width).
j'espère que ma réponse est assez claire.

[NoSmoking]

Bonjour,
c'est quoi cette syntaxe dans l'attibut style ?

Code html :

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

<div id="floatDiv" style="width=200%; border:1px gray solid;">

Code :

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

1
2
3
4
#floatDiv{
  width:200%;   /* on met : et pas = */
  border:1px gray solid;
}

[Invité]

Bonjour,
voilà l'astuce : http://codepen.io/jreaux62/pen/kpFGv

Code html :

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

1
2
3
4
5
6
7
8
9
10
		<td style="width:25%" id="floatDivtd">
			<div id="floatDiv">
				<table>
					<tr>
						<td>toto sdsdfgsdfg hd gf,kh </td>
						<td>totoyo çuy yyktyuikl iuiçlyuil gtkluiklt ui</td>
					</tr>
				</table>
			</div>
		</td>

Code css :

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
td#floatDivtd { 
  vertical-align:top; /* la position par defaut est au milieu */
}
#floatDiv { /* on remplit la cellule avec cette div */
	position:relative; 
	width:100%; 
	height:100%;
}
#floatDiv table {
	position:absolute; 
	width:200%;
	left:-50%; /* on centre sur la cellule */
	top:0; /* par rapport à la position qu'aurait dû avoir l'élément */
	border:1px solid gray;
}
#floatDiv table td {
	width:50%;
}

De fait, ce n'est pas la <div>, mais la <table> (dans la <div>) qui flotte au dessus.

[CCyrillus]

une marge négative sur le div fonctionne aussi: http://codepen.io/gc-nomade/pen/IpEfz

Code html :

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
<table style="border:1px red solid;width:100%">
	<tr>
		<td style="border:solid;width:25%">
			<div id="floatDiv" style="width:200%; border:1px gray solid;margin-right:-100%;">
				<table style="width:100%;">
					<tr>
						<td style="border:solid;width=50%">toto</td>
						<td style="border:solid;width=50%">toto</td>
					</tr>
				</table>
			</div>
		</td>
		<td style="border:solid;width:25%">cell</td>
		<td style="border:solid;width:25%">cell</td>
		<td style="border:solid;width:25%">cell</td>
	</tr>
</table>