表格单元格的绝对和相对定位
你曾经想过给单元格设置绝对或者相对定位吗?那我可帮不了你,因为表格元素根本
不鸟这些定位属性。然而,你可以通过将文本包含在一些具有绝对定位的元素里面来
实现元素的定位。
解决的方法就是使用一个常规的元素放在表格的单元格内(其大小跟单元格完全一致
)并且对这个元素设置相对定位的属性。没有语意了?是啊,但是我们该怎么做菜更
好呢,其实本文想介绍的一个方法就是适用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等元素上面