Propriété de hauteur TD fixe en HTML

Question

Je ne peux pas faire en sorte que "Date" ait une hauteur fixe. S'il y en a moins dans la section Body td L'élément Date est plus grand qu'il ne devrait l'être - même si j'ai défini la hauteur de la date sur 10% et la hauteur du corps sur 90%. Aucune suggestion?

<tr> 
    <td class="Author" rowspan="2"> 
    <a href="#">Claude</a><br /> 
    <a href="#"><img src="Users/4/Avatar.jpeg" style="border-width:0px;" /></a>   
    </td> 
    <td class="Date"> 
    Sent: 
    <span>18.08.2008 20:49:28</span> 
    </td> 
</tr> 
<tr> 
    <td class="Body"> 
    <span>Id lacinia lacus arcu non quis mollis sit. Ligula elit. Ultricies elit cursus. Quis ipsum nec rutrum id tellus aliquam. Tortor arcu fermentum nibh justo leo ante vitae fringilla. Pulvinar aliquam. Fringilla mollis facilisis.</span> 
    </td> 
</tr> 

Et mon css pour maintenant:

table.ForumThreadViewer td.Date { 
    text-align: left; 
    vertical-align: top; 
    font-size: xx-small; 
    border-bottom: solid 1 black; 
    height: 20px; 
} 

table.ForumThreadViewer td.Body { 
    text-align: left; 
    vertical-align: top; 
    border-top: solid 1 black; 
} 

table.ForumThreadViewer td.Author { 
    vertical-align: top; 
    text-align: left; 
} 

Il travaille pour FF mais pas pour IE. :(

Answer 1

Oli a raison! Donnez ensuite une capture d'écran que vous avez publiée, vous utilisez le mauvais balisage. Vous pouvez utiliser quelque chose comme ceci:

<div class="post"> 
    <div class="author"> 
    <a href="#">Claude</a><br /> 
    <a href="#"><img src="Users/4/Avatar.jpeg" /></a>   
    </div> 
    <div class="content"> 
    <div class="date">Sent: 18.08.2008 20:49:28</div> 
    <div class="body"> 
     This is the content of the message. 
    </div> 
    </div> 
    <div class="clear">&nbsp;</div> 
</div> 

avec css comme ceci:

div.post { 
    border: 1px solid #999; 
    margin-bottom: -1px; /* collapse the borders between posts */ 
} 
div.author { 
    float: left; 
    width: 150px; 
    border-right: 1px solid #999; 
} 
div.content { 
    border-left: 1px solid #999; 
    margin-left: 150px; 
} 
div.date { 
    border-bottom: 1px solid #999; 
} 
div.clear { 
    clear: both; 
    height: 0; 
    line-height: 0; 
} 

Answer 2

CSS

.Date { 
    height: 50px; 
} 

Answer 3

Je ne comprends pas bien votre question, vous dites que si vous utilisez ceci:

.Date { 
height: 10% 
} 
.Body { 
height: 90%; 
} 

Que le .Date td est plus grande qu'elle ne devrait être Comment? Savez-vous combien il devrait être sans définir une hauteur absolue? Prenez-vous des frontières et le rembourrage en compte?

Vous pourriez essayer d'ajouter colspan="2" au .Body td ou un élément supplémentaire <td> avec seulement un espace insécable ( )

Answer 4

Lorsque vous utilisez des pourcentages, ils sont relatifs à leur conteneur et même alors, cela ne fonctionne que sur certains types d'éléments. J'imagine que pour que cela fonctionne, vous devez appliquer la hauteur au <tr> s, et donner une hauteur au <table>. Si la taille <table> est relative, vous devez en plus donner une hauteur à son conteneur.

Mais en regardant vos données, êtes-vous vraiment vraiment que vous devriez utiliser une table?