Исправлено свойство высоты TD в HTML

Question

Я не могу сделать так, чтобы td "Date" имел фиксированную высоту. Если в разделе «Тело» меньше, то элемент «Дата» больше, чем должен быть - даже если я установил «Высота даты» на 10% и «Высота тела» на 90%. Есть предложения?

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

И мой 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;
}

Это работает для FF, но не для IE. (

Answer 1

Когда вы используете проценты, они относятся к их контейнеру, и даже тогда это работает только для некоторых типов элементов. Я полагаю, чтобы это работало, вам нужно применить высоту к <tr> с и дать <table> высоту. Если высота <table> также относительна, вам также необходимо указать ее контейнер.

Но, глядя на ваши данные, вы действительно уверены, что вам вообще следует использовать таблицу?!

Answer 2

Оли прав! Дайте тогда скриншот, который вы разместили, вы используете неправильную разметку. Вы можете использовать что-то вроде этого:

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

с помощью css:

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 3

Я не совсем понимаю ваш вопрос, вы говорите, если используете это:

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

Что .Date td больше, чем должно быть? Как вы узнаете, насколько большим он должен быть без установки абсолютной высоты? Вы принимаете во внимание границы и отступы?

Вы можете попробовать добавить colspan="2" к .Body td или дополнительному элементу <td> только с неразрывным пробелом ( )

Answer 4

CSS

.Date {
    height: 50px;
}