Fixed TD height property in HTML

I cannot force td "Date" to have a fixed height. If the tag is smaller in the Body section, the Date element is larger than it should be - even if I set the date height to 10% and body height to 90%. Any suggestions?

<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>

And now my css:

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;
}

It works for FF, but not for IE .:(

+3
source share
4 answers
Olya is right! Then give the screenshot that you posted, you are using the wrong layout. You can use something more like this:
<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>

with css as follows:

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;
}
+2
source

, , . , <tr> s <table>. <table> , .

, , , ?!

+6

CSS

.Date {
    height: 50px;
}
0

, , :

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

.Date td , ? , , ? ?

colspan="2" .Body td <td> (&nbsp;)

0

Source: https://habr.com/ru/post/1697411/


All Articles