Aligning *some* text in a <th> ?

Question

http://jsfiddle.net/F7BTx/

I'm trying to align just some text within a table header cell to the bottom of the cell, but I need the rest of the text to be centered. What's the best way to do this?

Ex desired output:

Header 1 is       Header 2           Header 3
on two lines        

    [-]              [-]                [-]

Current output:

Header 1 is       Header 2           Header 3
on two lines        

                     [-]                [-]
    [-]

Answer 1

Usually you would use vertical-align: bottom; instead of vertical-align: center;; however this will also bring the Header ns to the bottom as well. There is no way around this, that I am aware of, other than to use two rows for your header. One with ths and one with tds. Vertically align the second row with vertical-align: bottom and the first one with vertical-align: center;

Answer 2

edit: here you go: http://jsfiddle.net/TKxrC/20/

Try something like this:

<style>
  th.cool_format {
    position:relative; height:64px;
  }
  th.cool_format .table_head_title {
    position:absolute;
  }
  th.cool_format .some_weird_thing {
    position:absolute;
    bottom:0px;
  }
</style>
<th class='cool_format'>
  <span class='table_head_title'> Header 1 is on two lines </span>
  <span class='some_weird_thing'> [-] </span>
</th>

...not tested. If it doesn't work right, try giving th.cool_format a fixed width and the stuff inside of it the same width or widths of 100%. If it still doesn't work replace the spans with divs or make the spans display:block.