J'ai une disposition de page basée sur des tables et que je voudrais le restructurer avec une balise plus moderne, ce n'est pas une option. La mise en page utilise une cellule qui s'étend sur deux rangées sous forme de barre latérale du côté droit, tandis que la cellule supérieure gauche contient une en-tête simple et la cellule gauche inférieure contient le contenu principal de la page. La cellule en haut gauche a une hauteur fixe et la hauteur de la cellule inférieure et de la cellule droite n'est pas spécifiée. J'ai créé un exemple simplifié qui illustre mon problème:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css">
.fixed { height: 100px; }
table { border: 1px solid #000; }
td { border: 1px solid #ddd; vertical-align: top; }
tr { border: 1px solid #cfc; }
* { padding: 15px; }
</style>
</head>
<body>
<table>
<tr class="fixed">
<td>left</td><td rowspan="2"><div style="height: 500px;">right</div></td>
</tr>
<tr class="stretch">
<td>left</td>
</tr>
<tr class="footer">
<td colspan="2">footer</td>
</tr>
</table>
</body>
</html>
3 Réponses :
problème intéressant. Afraid La réponse peut être qu'il n'y a pas de solutions réelles au problème que vous décrivez, uniquement de contournement. J'ai trouvé que l'ajout d'un style à la deuxième "gauche" TD a fait disparaître le problème, au moins dans votre échantillon: espère que cela aide. PS. IE9 avait le même problème.
Ce n'est pas vraiment une option car la hauteur de la colonne de droite n'est pas vraiment fixée ou connue lorsque la page est dessinée.
Je comprend. Je crains que ma réponse soit toujours la seule réponse: Seuls les solutions de contournement comme celui que j'ai donné peuvent aider, sinon vous devrez avoir recours à JavaScript ou à une nouvelle disposition.
Je pense que Jeroen est juste qu'il n'y a pas de solutions PURE CSS à ce problème. Chaque fois qu'il y a des cellules dans une table avec rowspan défini, c'est-à-dire ignorer les hauteurs explicites définies sur ces lignes. La solution consiste à ne jamais utiliser rowspan . Dans ma situation, j'ai pu contourner le problème en plaçant le contenu qui couvrait deux rangées dans la deuxième rangée, laissant la cellule dans la première rangée vide et en utilisant une marge négative pour déplacer le début du contenu dans la première rangée. . J'espère que cela est utile à quelqu'un d'autre. Si quelqu'un a une solution pure CSS, je l'accepterai comme la réponse.
Même si une cellule ne contient qu'une image, vous devez savoir que les cellules de la table ont leur hauteur calculée en fonction de la position du texte em> la ligne de base; Et le style de texte actuel a un impact sur l'informatique de cette position de base et l'espacement de la ligne après.
Vous pouvez penser que la réglage "Hauteur de ligne: 1" serait suffisante pour éviter cet espacement de ligne, c'est-à-dire que la marge de marge qui se produit toujours en dessous de chaque ligne de texte. Ce n'est pas assez. La solution la plus simple consiste à définir " Remarque: avec cette hauteur de ligne, tout texte que vous placeriez dans ce la cellule aurait sa ligne de base juste au bas de la cellule, de sorte que les descendeurs chevauchent le rembourrage inférieur, la frontière, l'espacement des frontières de la cellule actuelle ou dans la bordure, le rembourrage ou la teneur de la cellule dans la rangée suivante ou du contenu sous la table si la cellule était sur la dernière ligne. p> Testé sur Google Chrome (version actuelle 15) p> Exemple (HTML5): P> <!DOCTYPE html>
<html><head>
<title>Examples of image transforms (rotations and mirroring)</title>
<style>
table,tbody,tr,td,image{margin:0;border:1px solid #999;border-collapse:collapse;border-spacing:0;background:#FFF;color:#000;padding:0;vertical-align:middle;text-align:center;}
td.z{line-height:0;}
</style>
</head><body>
<table border="0" cellspacing="0" cellpadding="0">
<tbody><tr>
<td style="border-bottom:hidden">Normal 0° (1,0,0,1,0,0)</td>
<td style="border-bottom:hidden">Mirrored 0° (-1,0,0,1,0,0)</td>
<td style="border-bottom:hidden">Mirrored 90° (0,1,1,0,0,0)</td>
<td style="border-bottom:hidden">Normal −90° (0,1,-1,0,0,0)</td>
</tr><tr>
<td class="z"><image alt="" src="Avatar-220px.jpg" style="-webkit-transform:matrix(1,0,0,1,0,0);"/></td>
<td class="z"><image alt="" src="Avatar-220px.jpg" style="-webkit-transform:matrix(-1,0,0,1,0,0);"/></td>
<td class="z"><image alt="" src="Avatar-220px.jpg" style="-webkit-transform:matrix(0,1,1,0,0,0);"/></td>
<td class="z"><image alt="" src="Avatar-220px.jpg" style="-webkit-transform:matrix(0,1,-1,0,0,0);"/></td>
</tr><tr>
<td class="z"><image alt="" src="Avatar-220px.jpg" style="-webkit-transform:matrix(1,0,0,-1,0,0);"/></td>
<td class="z"><image alt="" src="Avatar-220px.jpg" style="-webkit-transform:matrix(-1,0,0,-1,0,0);"/></td>
<td class="z"><image alt="" src="Avatar-220px.jpg" style="-webkit-transform:matrix(0,-1,1,0,0,0);"/></td>
<td class="z"><image alt="" src="Avatar-220px.jpg" style="-webkit-transform:matrix(0,-1,-1,0,0,0);"/></td>
</tr><tr>
<td style="border-top:hidden">Mirrored 180° (1,0,0,-1,0,0)</td>
<td style="border-top:hidden">Normal 180° (-1,0,0,-1,0,0)</td>
<td style="border-top:hidden">Normal 90° (0,-1,1,0,0,0)</td>
<td style="border-top:hidden">Mirrored −90° (0,-1,-1,0,0,0)</td>
</tr></tbody>
</table>
</body></html>