2013-01-09 85 views
3

表格單元格內元素有不少在這裏對TD裏面絕對定位stackexchange的問題,但我並沒有對我的具體問題找到解決方法:絕對定位高度可變

我需要實現以下佈局 layout of elements inside TD

此單元處於表表格數據表示的一部分。細胞

內容是文本數據。

文本可以是多行,並且具有爲垂直和水平中心對齊。 高度細胞的可能會發生變化如錶行的高度可以通過其它細胞的含量被拉伸,但細胞文本應始終保持垂直對準(目前它是由vertical-align: middle實現)

絕對定位的元素應該總是駐留在右上方細胞的角落。

我知道有關放置內部TD相對格,然後放置絕對定位元件內部的div工藝,但由於可變單元的高度和垂直對準的細胞文本的要求似乎不是一個選項。

解決方案需要與IE8 +,Chrome瀏覽器21+和15+ FF

+0

你不能在td中使用位置。你必須把一個div的TD內,然後讓去定位 – anacarolinats

回答

1

兼容插入周圍的closebutton一個div:

<table> 
    <tr> 
     <td> 
      <div class="wrapper"> 
       <div class="close">X</div> 
      </div> 
      My vertically aligned text. 
     </td> 
    </tr> 
</table> 

然後你closebutton的位置:

table td div.wrapper { 
    position: relative; 
} 

table td div.close { 
    position: absolute; 
    right: 0; 
    top: 0; 
} 
+0

我應該嘗試這樣做第一。這不會工作... –

+0

是的,以前試過 – zergussino