在表格单元格内绝对定位元素

您是否曾经想过要绝对或相对定位表格单元格？好吧，我帮不了你。表格单元格元素就是不会接受这些定位值。因此，您也不能在这些元素的 上下文中 绝对定位元素。我可以帮你解决这个问题。

答案是在表格单元格内创建一个通用的包装元素（与表格单元格大小完全相同），并将其用作相对定位上下文。非语义化？是的，但我们会用 JavaScript 将该标记包含进去，因此这不是什么大问题。笨拙的修复？你知道的。它有效吗？当然有效。

之前

<table>
   <tr>
       <td>
             <img src="yay.jpg" alt="">
      </td>
  </tr>
</table>

之后

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

jQuery 插件

您可以根据需要插入内部 div 包装器，但使用 JavaScript/jQuery 来做这件事很有吸引力，因为 1) 它非常容易，2) 它可以保持您的标记相同/干净。

我们将在此处创建一个快速 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);    
    });
};

此插件遍历传递给它的每个元素，创建一个具有相对定位的 <div>，其高度和宽度与父单元格相同，然后将该单元格的内部内容包装在自身内。

请记住，我没有使用所有普遍认为聪明的插件约定， 比如这个插件。

用法

加载 jQuery。然后运行上述插件代码。然后像这样使用插件，可以在网页底部或 DOM 就绪语句中使用。

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

这会将内部包装器附加到所有表格单元格（<th> 和 <td> 元素），尽管如您所见，您可以将其应用于任何任意元素集。

查看演示