Comment faire pour forcer un TD à une certaine hauteur avec CSS?

Bien que certains questions similaire de celui-ci ont déjà été posées, celui-ci est un peu différent.

J'ai une table qui ressemble un peu à quelque chose comme ceci:

<table>
 <tr>
  <td style="height: 100px;">
   <img src="..." style="height: 100px;" />
   <img src="..." style="height: 100px; position: relative; top: -100px;" />
  </td>
 </tr>
</table>

Ce sera la superposition de la seconde image sur la première. Cependant, la td insiste sur le fait d'être 200px de haut même s'il n'existe qu' 100px de contenu. Réglage de la tdhauteur 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 le réglage de la hauteur de 100px parce que le td sera encore insister sur le fait d'être 200px de haut.

Comment puis-je savoir le td à juste être 100px de haut?

Edit: Oh, et en utilisant le positionnement absolu est hors de question de trop parce que beaucoup de manipulation du DOM qui se passe dans la page et les choses se déplace autour de - considérant que la position absolue truc ne marche pas.

Edit: jsFiddle exemple peuvent être trouvés ici.

OriginalL'auteur Nathan Osman | 2011-03-13

8

Cela n'a rien à voir avec la td vraiment, mais avec la nature de position: relative. Un parent de l'élément de l'espace des séjours réservés dans le flux de documents.

Se débarrasser de la relative, et l'utilisation position: absolute sur la première image à la place.

Edit: je viens de voir ton edit. Hmmm. De la pensée.

Deux solution de contournement des idées vous viennent à l'esprit:
- Claque un overflow: hidden sur le td
- Si cela ne fonctionne pas dans tous les navigateurs ou n'est pas valide (je ne suis pas sûr à 100% pour le moment) Mettre les deux images dans un <div height='100px;'> et de mettre un overflow: hidden.
Désolé, j'ai oublié d'ajouter le modifier quand j'ai écrit le post.
J'ai ajouté une solution qui devrait fonctionner - si il est compatible avec vos manipulations DOM
La première solution ne fonctionne pas (pas de Chrome au moins), et je vais avoir un peu de mal à comprendre le second: d'où overflow: hidden aller?
Deuxième solution fonctionne: jsfiddle.net/thirtydot/AZGr9
très bien, merci. @George voir la tripoter.

OriginalL'auteur Pekka 웃
0

Déclarant
```
<td style="height: 100px; width:100px; overflow:hidden"> ...
```
devrait vous aider.

Malheureusement, aucune. Il n'a pas à se débarrasser de l'espace.

OriginalL'auteur c-smile
0

Il est 200px de contenu, car position:relative n'est pas de libérer l'espace de l'objet occupé avant il a été déplacé. Vous avez BESOIN d'utiliser la position absolue et probablement un intérieur DIV parce que des choses comme de débordement ont tendance à causer des problèmes sur la TD.

OriginalL'auteur SpliFF

Superposer une seconde image dans une cellule de tableau:

<html>
<head>
<style>
    table {border:1px solid #898989;}
    td {border:1px solid #0090aa; overflow:hidden; height: 100px;}
    td div {position:relative;}
    .col1 {width:80px;}
    .col1 {width:128px;}
    .over {position:absolute; top:0; left:0; }
    .under {}
</style>
</head>

<body>
    <table>
        <tr>
            <td class="col1">1</td>
            <td>
                <div>
                   <img class="under" src="blank_file.png"  />
                   <img class="over" src="19.png"  />
                </div>
            </td>
        </tr>
    </table>
</body>
</html>

OriginalL'auteur jim31415

0

Au lieu d'utiliser la position par rapport à la deuxième image pour la déplacer vers le haut et la superposition, l'utilisation négative de la marge.

Changer cela.
```
<img src="..." style="height: 100px; position: relative; top: -100px;" />
```
Utilisation:
```
<img src="..." style="height: 100px; margin-top:-100px" />
```
De cette façon, il sera en fait de déplacer l'image vers le haut et que les TD seront alors seulement span 100px.

OriginalL'auteur Saint Billios

Vous devez vous connecter pour publier un commentaire.