HTML 的 table 與 position:absolute 的問題

一般在做定位的時候很常用 position: relative 和 position: absolute 的方式搭配來配置 DOM 的位置，最近想要在 table 裡面做才發現問題，table cell 是比較特別的 DOM ，他可以自動伸展，又可以做垂直對齊，但要做 position 就出問題啦，如果一樣在 td 那層設 position: relative，下面那一層設 position: abslute ，東西就會飛掉了，所以一樣想用 position 來定義位置的話，就只好在 td 裡面再加一層 div 了。

再找解法的時候找到這篇: Absolutely Position Element Within a Table Cell，可以算是亡羊補牢的方法，用一個 plugin 讓 DOM 自己再長出 div 來，但我覺得比較不好就是了，有需要也可以用看看。

plugin

view plaincopy to clipboardprint

1. $.fn.iWouldLikeToAbsolutelyPositionThingsInsideOfFrickingTableCellsPlease = function() {   
2.     var $el;   
3.     return this.each(function() {   
4.         $el = $(this);   
5.         var newDiv = $("<div />", {   
6.             "class": "innerWrapper",   
7.             "css"  : {   
8.                 "height"  : $el.height(),   
9.                 "width"   : "100%",   
10.                 "position": "relative"  
11.             }   
12.         });   
13.         $el.wrapInner(newDiv);       
14.     });   
15. };  

使用

view plaincopy to clipboardprint

1. $("th, td").iWouldLikeToAbsolutelyPositionThingsInsideOfFrickingTableCellsPlease();  

反應：