表格单元格的绝对和相对定位

你曾经想过给单元格设置绝对或者相对定位吗？那我可帮不了你，因为表格元素根本

不鸟这些定位属性。然而，你可以通过将文本包含在一些具有绝对定位的元素里面来

实现元素的定位。
解决的方法就是使用一个常规的元素放在表格的单元格内（其大小跟单元格完全一致

）并且对这个元素设置相对定位的属性。没有语意了？是啊，但是我们该怎么做菜更

好呢，其实本文想介绍的一个方法就是适用JavaScript，这绝对是一个非常棒的注意

。
Before
<table>
   <tr>
       <td>
             <img src="yay.jpg" alt="">
      </td>
  </tr>
</table>
After
<table>
   <tr>
       <td>
            <div class="innerWrapper"> <!-- appended with JavaScript -->
                 <img src="yay.jpg" alt=""> <!-- original content of cell

-->
            </div>
      </td>
  </tr>
</table>

JQuery Plugin:
你可以在你要控制的元素外面嵌套一个div标签，但是更好的做法是适用jquery，因

为他不但很容易实现，而且可以使得元素看上去很整齐简洁。
下面给出table表格单元格内实现绝对或者相对定位的jQuery代码，你可以随时拿去

调用。

$.fn.iWouldLikeToAbsolutelyPositionThingsInsideOfFrickingTableCellsPlease

= function() {
    var $el;
    return this.each(function() {
     $el = $(this);
     var newDiv = $("<div />", {
      "class": "innerWrapper",
      "css"  : {
       "height"  : $el.height(),
       "width"   : "100%",
       "position": "relative"
      }
     });
     $el.wrapInner(newDiv);
    });
};

这段jQuery代码在每个相对定位的单元格内部加入了一个与其同宽同高的div，并且

将其引用到自身。当然了，你可以随意将这段代码应用在例如 th、td等元素上面

本文原载： 青岛网站建设 - 青岛SEO [http://www.elingxi.com/]
本文永久链接： http://www.elingxi.com/css/010Q552011.html