Выровнять деление по вертикали в таблице <th>

Question

У меня есть заголовок таблицы, <th>, который содержит <div> с текстом.Я хочу по вертикали выровнять div так, чтобы он выровнялся по bottom заголовка.У меня серьезные проблемы с этим, хотя кажется, что это должно быть легко.Любая помощь будет отличной.

т.е.

<table>
  <tr>
    <th>
      <div>T<br>E<br>X<br>T</div>
    </th>
    ...
  </tr>
  ...
</table>

Как видите, я делаю текст заголовка вертикальным (добавляя теги разрыва).Заголовки тянутся динамически, а длина (и, следовательно, высота) варьируется.Но мне нужно, чтобы они были выровнены по низу, а не по центру.

Answer 1

<style>
th{
vertical-align:middle}
</style>

<table>
  <tr>
    <th>
      <span>T<br>E<br>X<br>T</span>
    </th>
    ...
  </tr>
  ...
</table>

Это должно работать.

Div с дисплеем: inline также может помочь. Дисплей: встроенный трюк здесь.