2013年7月25日 星期四

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
  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. };  

使用
  1. $("th, td").iWouldLikeToAbsolutelyPositionThingsInsideOfFrickingTableCellsPlease();  
反應:

0 意見:

Related Posts Plugin for WordPress, Blogger...