Comment puis-je obtenir le droit à l'alignement de travailler dans un div à l'intérieur d'une cellule de tableau pour IE 7?
Float:right
spécifié pour un div
à l'intérieur d'une cellule de tableau ne semble pas avoir d'effet dans IE. J'ai aussi essayé text-align droit, entre autres choses, pour aligner le contenu d'un calque vers la droite, mais sans succès dans IE 7.
Bout de code CSS:
.workloadcell {
background-color: #E6D7E9;
padding: 0px;
width: 14px;
height: 16px;
text-align: right;
}
div.workload {
background-color: #E6D7E9;
text-align: right;
width: 14px;
float: right;
}
Extrait de code HTML:
<td class="workloadcell">
<div class="workload">
1
</div>
</td>
À la fois le HTML et le CSS valider, et dans Firefox, le texte s'aligne à droite, comme il se doit. Si vous voulez tester le code complet par copier/coller, c'est par ici:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1">
<title>Table Test</title>
<style type="text/css">
td {
border: 1px solid black;
}
.workloadcell {
background-color: #E6D7E9;
padding: 0px;
width: 14px;
height: 16px;
text-align: right;
}
div.workload {
background-color: #E6D7E9;
text-align: right;
width: 14px;
float: right;
}
</style>
</head>
<body>
<table>
<tr>
<td>
</td>
<td colspan="4">
<div>
2008
</div>
</td>
</tr>
<tr>
<td>
</td>
<td>
<div>
Q1
</div>
</td>
<td>
<div>
Q2
</div>
</td>
<td>
<div>
Q3
</div>
</td>
<td>
<div>
Q4
</div>
</td>
</tr>
<tr>
<td>
workload forecast
</td>
<td class="workloadcell">
<div class="workload">
1
</div>
</td>
<td class="workloadcell">
<div class="workload">
2
</div>
</td>
<td class="workloadcell">
<div class="workload">
2
</div>
</td>
<td class="workloadcell">
<div class="workload">
2
</div>
</td>
</tr>
<tr>
<td>
actual workload
</td>
<td class="workloadcell">
<div class="workload">
3
</div>
</td>
<td class="workloadcell">
<div class="workload">
3
</div>
</td>
<td class="workloadcell">
<div class="workload">
2
</div>
</td>
<td class="workloadcell">
<div class="workload">
3
</div>
</td>
</tr>
</table>
</body>
</html>
(Je sais que le CSS n'est pas optimale en ce sens que les déclarations de classe sont répétées pour plusieurs éléments, mais merci de ne pas commenter sur ce, si elle n'est pas pertinente pour le problème.)
OriginalL'auteur simon | 2009-03-23
Vous devez vous connecter pour publier un commentaire.
Il devrait fonctionner de la façon dont vous l'avez (ou la façon dont alexmeia l'indique).
Mais, (c'est IE), la les en-têtes de T1, T2, etc. sont en train de pousser les colonnes de la table plus large que le 14 px que vous avez demandé.
Les colonnes sont justifiés à droite dans la 14px vous avez définie, mais les divs sont pas se déplaçant vers la droite dans IE. (Le div est de rester à l'intérieur de la 14px défini pour lui, même si la colonne est fait plus large que 14px)
Pour illustrer cela, vous pouvez soit faire de la largeur dire 28px ou changer la couleur de l'un des milieux de démontrer la différence entre les td et les div à l'intérieur.
La solution pour IE est soit de ne pas définir une largeur ou pour le rendre suffisamment large pour accueillir l'en-tête.
OriginalL'auteur Traingamer
Vous n'avez pas besoin de déclarer les règles de la div.la charge de travail.
Utilisez uniquement le présent règlement et tout fonctionnera correctement:
OriginalL'auteur alexmeia
Il est intéressant de noter, c'est à dire, en particulier v6 sur la pré SP1 XP, et windows plus anciens a de graves problèmes de rendu lorsque vous mêler à des tables au sein de la vrd, et les divisions au sein de ces tables. Une fois que vous dépassez une certaine complexité, & de nidification vous pouvez obtenir un blanc/blanc de la page.
Si votre besoin pour aligner à droite le texte contenu dans certaines cellules, je suggère l'ajout d'une déclaration de classe à la balise td, pas de nidification d'un div. Je vous suggère aussi d'essayer dans IE8, et voir si le problème persiste. Vous n'avez pas mentionné les versions pour lesquelles vous avez besoin de soutien.
OriginalL'auteur Tracker1