7
votes

Comment forcer un TD à être une certaine hauteur avec CSS?

Bien que Quelques questions Similaire à celui-ci a été posé auparavant, celui-ci est un peu différent.

J'ai un Table qui ressemble un peu quelque chose comme ceci: xxx

Ceci va superposer la deuxième image sur la première. Cependant, le td insiste sur l'être 200px Tall même s'il n'y a que 100px du contenu . Réglage de la hauteur td ne fait rien, ce qui semble cohérent avec les réponses aux autres questions.

Cependant, je n'ai pas la possibilité d'intégrer le contenu dans un Div et réglage de la hauteur sur 100px car le td sera toujours insister pour être 200px .

Comment puis-je dire au td to juste être 100px haut?

EDIT: OH, et l'utilisation d'un positionnement absolu est également hors de question parce que beaucoup de manipulation DOM surviennent dans la page et les trucs sont déplacés autour - tandis que les trucs absolument positionnés ne le font pas. edit: jsfiddle exemple peut être trouvé ici .

html css html-table 0 commentaires

5 Réponses : 9 votes Cela n'a rien à voir avec le td vraiment, mais avec la nature de position: relative . L'espace de l'élément relatif reste réservé dans le flux de documents. Débarrassez-vous du relative et utilisation Position: absolu sur la première image à la place. edit: i vient de voir votre édition. Hmmm. Penser. Deux idées de contournement se viennent à l'esprit: SLAP A Overflow: caché sur le TD Si cela ne fonctionne pas dans tous les navigateurs ou n'est pas valide (je ne suis pas sûr à 100% maintenant) Mettez les deux images dans un < / Code> et mettre un Overflow: caché à ce sujet. 2 commentaires @George j'ai ajouté une solution de contournement qui devrait fonctionner - s'il est compatible avec vos manipulations DOM @Pekka: la première solution ne fonctionne pas (pas au moins chrome au moins) et je suis un peu de difficulté à comprendre le second: où débordement: caché va? 0 votes déclarer xxx devrait vous aider. 1 commentaires Malheureusement non. Cela ne se débarrasse pas de l'espace. 0 votes superposez une seconde image dans une cellule de table: xxx 0 commentaires 0 votes Il y a 200px de contenu car position: relatif ne libère pas l'espace que l'objet occupé avant sa déplacement. Vous devez utiliser la position absolue et probablement une DIV intérieure parce que des choses comme des débordements ont tendance à causer des problèmes sur TD. 0 commentaires 0 votes Au lieu d'utiliser la position relative sur la deuxième image pour la déplacer et la superposition, utilisez la marge négative. changez ceci. xxx Utilisez: xxx de cette façon, ça va déplacer l'image et que TD va alors seulement couvrir 100px. 0 commentaires

Articles qui pourrait vous intéresser : Google Chrome Uncaught (promis) DOMException lors de la lecture AUDIO Select2 ne s'affiche pas correctement dans le mode bootstrap Le bootstrap de Twitter a-t-il des classes utilitaires de taille de police? Comment puis-je définir un format pour les nombres d'entrée dans Blazor