IE css - dernière ligne du tableau à développer pour remplir la hauteur restante

Étant donné le HTML comme suit, comment puis-je obtenir la dernière rangée pour prendre la hauteur restante, et avoir les n-1 premières lignes pour prendre autant de hauteur comme ils ont besoin?IE css - dernière ligne du tableau à développer pour remplir la hauteur restante

Cela semble fonctionner comme dans Chrome, mais pas dans Firefox2 ou IE6/7/8.

<table> 
    <tr> 
    <td rowspan="5"><div style="border: 1px solid #cdcdcd; width: 100px; height: 300px;"/></td> 
    <td/> 
    </tr> 
    <tr> 
    <td>one</td> 
    </tr> 
    <tr> 
    <td>two</td> 
    </tr> 
    <tr> 
    <td>three</td> 
    </tr> 
    <tr> 
    <td>full</td> 
    </tr> 
</table>

Donc, l'idée est que la dernière ligne, avec « plein » en elle, devrait être vraiment grand, et les autres lignes, « un », « deux » et « trois » doit être aussi petit que possible.

J'ai essayé des choses comme mettre des hauteurs exactes sur les lignes, dites « < style tr = » height: 20px; » > et j'ai essayé une hauteur de 100% par rapport à la dernière ligne, pas de chance jusqu'à présent

mise à jour:.

Cette disposition va être utilisé pour différents types de contenu, et l'intention est de la table à la taille elle-même au contenu Parfois, la div sera grande, sa hauteur détermine de la table hauteur, mais d'autres fois le div est court, alors les rangs (un, deux, trois) déterminent la hauteur de la table

Source

2010-11-15 Alex Black

Je n'ai pas de réponse rapide pour vous, mais je pense que vous devrez utiliser javascript pour implémenter cette fonctionnalité. –

J'espère qu'il y a une solution non javascript :) –

D'accord, après quelques tests supplémentaires, je retire ma réponse précédente car elle ne résout pas du tout la question de la hauteur. Désolé pour ça. : -/ – stealthyninja

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html><body> 
<table border=1> 
    <tr> 
    <td rowspan="2"><div style="border: 1px solid #cdcdcd; width: 100px; height: 300px;"/></td> 
    <td valign=top style="padding:0px;"> 
     <table height=1> 
      <tr> 
       <td>one</td> 
      </tr> 
      <tr> 
       <td>two</td> 
      </tr> 
      <tr> 
       <td>three</td> 
      </tr> 
      <tr> 
    <td valign=top>full<br><br><br>more full</td> 
    </tr> 
     </table> 
    </td> 
    </tr> 
</table> 
</body></html>

Updatedx3, travaille dans IE6/ff

Source

2010-11-15 15:46:15

1. J'ai beaucoup investi dans une mise en page basée sur la table, donc si possible, je dois rester avec des tables. 2. J'imagine que vous ne serez pas d'accord avec moi, mais divs vraiment aspirer à des dispositions tabulaires. –

Je ne pense pas le réglage "hauteur: 100%;" va travailler sur la table, je veux que la table soit aussi haute qu'elle doit être, pas aussi grande que son conteneur. –

Eh bien par définition "Aussi grand que cela doit être" est la hauteur fixe, mais avec le "complet" un effondré, peut-être que vous voulez définir "min-height: ##%" sur le dernier élément à la place? –

Si javascript est ok, vous pouvez utiliser jQuery et de trouver la première position de la dernière ligne et la position du fond de la fenêtre ou élément. La différence doit être définie comme la hauteur de la dernière ligne.

Je n'ai pas encore fait de code, car je ne savais pas si vous cherchiez une table à l'intérieur d'un objet ou si vous la remplissiez au bas de la fenêtre. Je peux le faire pour vous si vous souhaitez plus de détails.

Source

2010-11-15 15:47:25

Pas de javascript merci. L'intention est que la hauteur de la table soit la hauteur de son contenu. –

IE css - dernière ligne du tableau à développer pour remplir la hauteur restante

Répondre

Questions connexes