创建可堆叠表插件

Question

所以我试图创建一个超级简单的插件，当视图端口向下滚动到移动视图端口时，它会堆叠一个表。而不是使用CSS伪选择器（jQuery中不允许）我绝对定位跨度。 CSS的作用只是乘法的跨度，因为所有内容都在.each（）语句中。

(function($) {
    $.fn.stackableTable = function() {

        console.log(this);

        var $table = this;

        $table.each(function(h, table) {
            $th = $(this).find("thead th");
            $tr = $(this).find("tbody tr");
            $td = $tr.find("td");

            //console.log($th, $td, $tr);
            $tr.each(function(i, tr){
                $th.each(function(j, th){
                    var headCopy = $(this).text();
                    $td.each(function(k, td){
                        var columHead = $('<span />').attr("class", "header").html(headCopy);
                        $td.eq(k).prepend(columHead);
                    }); 
                });
            });
        });
    };
}(jQuery)); 

使用jQuery或JavaScript非常感谢任何有关正确嵌套的帮助。请在此处查看CodePen：http://codepen.io/michaeladamek/pen/jPQgZg

谢谢！