Verhindern, dass eine Zelle die Tabellenhöhe vergrößert

Question

Ich versuche, ein Bild so zu machen, dass es die gesamte verbleibende Breite für eine Tabelle einnimmt und die gesamte Höhe einer Tabelle ausdehnt, ohne sie zu erweitern, mit Überlauf: Automatisch, wenn nicht genug Höhe.

Die Breite Bit ist einfach, aber egal was ich mache die Tabellenzelle mit dem Bild wird die Höhe der Tabelle zu erweitern. Gibt es eine Möglichkeit, dies zu verhindern, ohne explizit die Höhe des Bildes festzulegen?

Answer 1

Sie müssten ein Wrapper-Element um den Inhalt herum verwenden, um die Höhe zu beschränken.

<table> 
    <tr> 
     <td><div class="overflow">This is short.</div></td>   
     <td><div class="overflow">This is longer.</div></td> 
     <td><div class="overflow">This is really long and repeated. This is really long and repeated.</div></td>   
    </tr> 
</table> 

.overflow { 
    max-height:40px; 
    overflow:hidden; 
} 

var tableHeight = $('table').height(); 
$('.overflow').css('height',tableHeight + 'px'); 

Answer 2

Konnte das Bild immer einen Prozentsatz geben, z. height = "100%" sollte die volle Größe der Zelle ergeben, in der sie sich befindet, aber den Überlauf einschränken.

Answer 3

Bis jetzt unterscheiden sich die Lösungen, die ich gefunden habe, im Browser, sind also nicht ideal. Sie können auf Grundlage des Clients unterschiedliche Markups rendern. (Aber noch auf der Suche für eine allgemeingültige Antwort.)

aktualisierte wieder für die universellste Lösung bisher:

<style> 
    div.ImageBlock 
    { 
     height:100%; 
     width:100%; 
     left:0px; 
     top:0px; 
     overflow:auto; 
    } 
    div.IE_CompatMode 
    { 
     position:absolute; 
    } 
</style> 

Entweder arbeitet in Chrome und die IE_CompatMode hinzugefügt werden, wenn IE Kompatibilitätsmodus hat On .

<td rowspan="2" style="position:relative;"> 
    <div class="ImageBlock [conditional:]IE_CompatMode"> 
     <img src="Images/Jellyfish.jpg" style="position:absolute; top:0px; left:0px;" /> 
    </div> 
</td> 

Und nichts (das Ich habe noch versucht) arbeitet in Firefox.