div spanning table cells

by homer2

HTML

<script src="http://code.jquery.com/ui/1.8.22/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.8.22/themes/base/jquery-ui.css">
<table class="ui-widget gridView" cellspacing="0" rules="all" border="1" id="ctl00_MainContent_m_GridViewCostCenterPrcns" style="border-collapse:collapse;">
        <tbody><tr class="ui-widget-header">
            <th scope="col">EWO</th><th scope="col">PRCN</th><th scope="col">JAN</th><th scope="col">FEB</th><th scope="col">MAR</th><th scope="col">APR</th><th scope="col">MAY</th><th scope="col">JUN</th><th scope="col">JUL</th><th scope="col">AUG</th><th scope="col">SEP</th><th scope="col">OCT</th><th scope="col">NOV</th><th scope="col">DEC</th>
        </tr><tr class="ui-widget-content" data-ewo="9176" data-prcn="90121">
            <td>9176 <a class="addPrcn" href="#">add prcn</a></td><td>90121</td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td><div data-ewo="9176" data-prcn="90121" data-valid-month-date="8/1/2012" class="prcn">90121</div></td><td><div data-ewo="9176" data-prcn="90121" data-valid-month-date="9/1/2012" class="prcn">90121</div></td><td><div data-ewo="9176" data-prcn="90121" data-valid-month-date="10/1/2012" class="prcn">90121</div></td><td><div data-ewo="9176" data-prcn="90121" data-valid-month-date="11/1/2012" class="prcn">90121</div></td><td><div data-ewo="9176" data-prcn="90121" data-valid-month-date="12/1/2012" class="prcn">90121</div></td>
        </tr><tr class="ui-widget-content alt" data-ewo="9182" data-prcn="90122">
            <td>9182 <a class="addPrcn" href="#">add prcn</a></td><td>90122</td><td><div data-ewo="9182" data-prcn="90122" data-valid-month-date="1/1/2012" class="prcn">90122</div></td><td><div data-ewo="9182" data-prcn="90122" data-valid-month-date="2/1/2012" class="prcn">90122</div></td><td><div data-ewo="9182" data-prcn="90122" data-valid-month-date="3/1/2012" class="prcn">90122</div></td><td></td><td></td><td></td><td></td><td></td><td><div...

CSS

div.spans{position: absolute; }
div.prcn{background-color: blue; margin:4px;}
td{vertical-align: top;}

.ui-button .ui-button-text
{
 line-height: .6;
 font-size: small !important;
}

.hidden{visibility: hidden}

JavaScript

var source =...