對齊<th>中的* some *文本？

http://jsfiddle.net/F7BTx/對齊<th>中的* some *文本？

我想對齊表格標題單元格內的一些文本到單元格的底部，但我需要其他文本居中。什麼是最好的方法來做到這一點？

防爆所需的輸出：

Header 1 is  Header 2   Header 3 
on two lines   

    [-]    [-]    [-]

電流輸出：

Header 1 is  Header 2   Header 3 
on two lines   

        [-]    [-] 
    [-]

來源

2010-09-07 Stefan Kendall

你爲什麼不使用兩個'tr'？這將訣竅 – nico 2010-09-07 22:58:55

不可能。第二個元素是用javascript動態添加的，我試圖讓標記儘可能小。 – 2010-09-07 23:24:48

通常你會使用vertical-align: bottom;代替vertical-align: center;;然而這也將使Header n成爲底部。除了爲您的標題使用兩行之外，我沒有辦法解決這個問題。一個與th s和一個與td s。垂直對齊的第二排與vertical-align: bottom和第一個與vertical-align: center;

來源

2010-09-07 22:42:58

不幸的是，「你的問題不容易以好的方式回答」是這個問題的最佳解決方案。 – 2010-10-22 15:58:22

編輯：在這裏你去：http://jsfiddle.net/TKxrC/20/

嘗試是這樣的：

<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>

...沒有測試。如果它不能正常工作，請嘗試給th.cool_format一個固定的寬度，其內部的東西寬度或寬度均爲100％。如果仍不起作用，請用div s代替span s或使跨度display:block。

來源

2010-09-07 22:43:21

我試過類似的東西。看起來你不能使用表格單元格的相對位置，所以你需要在'th'裏面有一個虛擬'div'。 – casablanca 2010-09-07 22:48:34

是啊，你呢...只是意識到我自己。我想這是因爲'th'不是'display：block'。 – 2010-09-07 22:56:02

我不知道標題的高度。這是動態的，需要在不同的表格設置中重複使用。 – 2010-09-08 16:59:38

對齊<th>中的* some *文本？

回答

相關問題