Выравнивание ячеек таблицы по высоте

drdorian · July 18, 2011

Здравствуйте.

Столкнулся с проблемой - есть таблица, в которой имеются ячейки, разные по высоте из-за контента. Поэтому высота ячеек получается разной. А нужно прижать один элемент к низу ячейки.Будь они одинаковой высоты - воспользовался бы

 position: absolute

. А так все скачет и получается некрасиво. Есть какие либо варианты выравнивания ячеек по самой высокой в ряду?

Bonzash · July 18, 2011

http://htmlbook.ru/css/vertical-align

sigma77 · July 18, 2011

drdorian,

Мммм. А точно таблица?

В таблице все ячейки в ряду имеют одинаковую высоту.

И выкладываё лучше код или ссылку на страницу.

drdorian · July 18, 2011

vertical-align не прокатит, так как только один элемент должен быть прижат к низу, остальные к верху.

Ячейки то фактически по высоте одинаковые, но то что не хватает в меньших как будто дополняется паддингом. В итоге вписанный в ячейку div не растягивается на всю высоту, даже если указать height: 100%;

Сайт на локалке, а код выплёвывается Drupal'ом, поэтому скопировать его сюда проблематично.Слишком много его.

sigma77 · July 18, 2011

drdorian,

Ну блин, сделай прототип (пример). Ну или на крайняк скопируй из фаербага.

Как что-то можно посоветовать в слепую. По описани, мне например, вообще не понятно, что у тебя происходит.

Это нужно - http://chikuyonok.ru/2011/04/inline-vertical-align/ ?

Great Rash · July 18, 2011

Сайт на локалке, а код выплёвывается Drupal'ом, поэтому скопировать его сюда проблематично.Слишком много его.

Значит надо не полениться и сделать тестовую страницу с проблемным местом.

drdorian · July 18, 2011

drdorian,
Ну блин, сделай прототип (пример). Ну или на крайняк скопируй из фаербага.
Как что-то можно посоветовать в слепую. По описани, мне например, вообще не понятно, что у тебя происходит.
Это нужно - http://chikuyonok.ru/2011/04/inline-vertical-align/ ?

Спасибо за совет, но у меня все таки таблица.Я в этом уверен на все 100 =)

Подготовлю тест, выложу.

drdorian · July 18, 2011

<html>
<head>
<style>
  table {
    width: 400px;
  }
  table td {
    width: 50%;
    vertical-align: top;
  }
  .td_bottom {
    margin-top: 10px;
  }
</style>
</head>
<body>
  <table>
    <tr>
    <td>
      <div class="td_wrapper">
      <div>
        a lot of contenta lot of contenta lot of contenta lot of contenta lot of contenta lot of contenta lot of contenta lot of contenta lot of contenta lot of contenta lot of contenta lot of contenta lot of contenta lot of contenta lot of contenta lot of contenta lot of contenta lot of contenta lot of contenta lot of contenta lot of contenta lot of contenta lot of contenta lot of contenta lot of contenta lot of contenta lot of contenta lot of contenta lot of contenta lot of contenta lot of contenta lot of contenta lot of contenta lot of contenta lot of contenta lot of contenta lot of contenta lot of contenta lot of contenta lot of contenta lot of contenta lot of contenta lot of contenta lot of contenta lot of contenta lot of contenta lot of contenta lot of contenta lot of contenta lot of contenta lot of contenta lot of contenta lot of contenta lot of contenta lot of contenta lot of contenta lot of content
        </div>
        <div class="td_bottom">
        some content to place at bottom
        </div>
      </div>
    </td>
    <td>
    <div class="td_wrapper">
    <div>
    a bit of contenta bit of contenta bit of contenta bit of contenta bit of contenta bit of contenta bit of contenta bit of contenta bit of contenta bit of contenta bit of content
    </div>
    <div class="td_bottom">
        some content to place at bottom
        </div>
    </div>
    </td>
    </tr>
  </table>
</body>
</html>

например вот так.ширина таблицы ограничена, ширина ячеек то же постоянна.вопрос стоит в том чтобы прижать div.td_bottom к низу ячейки.

Edited July 18, 2011 by drdorian

Great Rash · July 18, 2011

Прижать td_bottom книзу получится только если у <td> будет задана высота. Т.к. высота незадана, то и прижать ничего не получится.

drdorian · July 18, 2011

То есть только при статичной высоте ячейки? А каким образом?Попробовал задать ячейке position:relative, а нужному диву absolute и bottom: 0, почему то все div.td_bottom слетают вниз таблицы.

Bonzash · July 18, 2011

table {
	width: 400px;
	position: relative;
	height: 1000px;
}
.td_bottom {
	margin-top: 10px;
	position: absolute;
	bottom: 0;
}

?

drdorian · July 18, 2011

table {
	width: 400px;
	position: relative;
	height: 1000px;
}
.td_bottom {
	margin-top: 10px;
	position: absolute;
	bottom: 0;
}

?

Нет, position:relative задается для ячейки, а не для всей таблицы. И строк в таблице больше чем 1.

Great Rash · July 18, 2011

В ячейке таблицы position: absolute; не работает, об этом ясно написано в спеке.

То есть только при статичной высоте ячейки? А каким образом?


<table style="height: 200px;">
  <tr>
    <td style="height: 100%;">
      <div style="height: 100%; position: relative;">
        <div style="position: absolute; bottom: 0;">я буду снизу в ячейке</div>
      </div>
    </td>
  </tr>
</table>

drdorian · July 18, 2011

Всем спасибо за участие.Значит буду делать статичными по высоте.

Sign In

Выравнивание ячеек таблицы по высоте

Question

Link to comment

Share on other sites

13 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information