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

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

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

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

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

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

好呢,其实本文想介绍的一个方法就是适用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等元素上面