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


3

Я не могу сделать 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. :(

  0

Пожалуйста, ваши CSS и поэтому кто-то может помочь вам. 23 сен. 082008-09-23 19:31:25

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

Спасибо, много! :) 24 сен. 082008-09-24 04:33:54


0

CSS

.Date { 
    height: 50px; 
} 
  0

Работает для FF, но не для IE. 23 сен. 082008-09-23 19:49:17

  0

Не работает для IE, потому что IE рассматривает его как минимальную высоту. См. Http://stackoverflow.com/questions/56658/how-do-i-pecpeci-in-html-or-css-the-absolute-minimum-width-of-a-table-cell#56738 24 сен. 082008-09-24 03:36:44


0

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

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

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

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


6

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

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

  0

Что не происходит Работа? Согласен, это не похоже на табличные данные для меня! 23 сен. 082008-09-23 19:53:25