Фиксированное свойство высоты TD в HTML
Я не могу сделать так, чтобы td "Date" имела фиксированную высоту. Если в разделе Body меньше 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. :(
Ответы 4
CSS
.Date {
height: 50px;
}
Не работает для IE, потому что IE рассматривает его как минимальную высоту. См .: stackoverflow.com/questions/56658/…
Я не совсем понимаю ваш вопрос, вы говорите, если используете это:
.Date {
height: 10%
}
.Body {
height: 90%;
}
Что .Date td больше, чем должен быть? Как узнать, насколько он должен быть большим, не задав абсолютную высоту? Учитываете ли вы границы и отступы?
Вы можете попробовать добавить colspan = "2" к .Body td или дополнительный элемент <td> только с неразрывным пробелом ( )
Когда вы используете проценты, они относятся к их контейнеру, и даже тогда это работает только с некоторыми типами элементов. Я полагаю, чтобы это сработало, вам нужно применить высоту к <tr>s, а <table> - высоту. Если высота <table> также относительна, вам также необходимо указать высоту контейнера.
Но, глядя на свои данные, вы, В самом деле, уверены, что вам вообще следует использовать таблицу ?!
Что не работает? Согласен, мне это не похоже на табличные данные!
Оли прав! Приведите тогда размещенный вами скриншот, вы используете неправильную разметку. Вы можете использовать что-то вроде этого:
<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"> </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;
}
Пожалуйста, опубликуйте свой CSS, чтобы кто-нибудь мог вам помочь.