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 border="1">
    <thead>
      <tr>
<td></td><td>Jan</td><td>Feb</td><td>Mar</td><td>Apr</td><td>May</td><td>Jun</td><td>Jul</td><td>Aug</td><td>Sep</td><td>Oct</td><td>Nov</td><td>Dec</td>
      </tr>
    </thead>
    <tbody>
    <tr>
      <td>1111</td>
      <td><div data-prcn="1111" class="prcn">blah</div><div data-prcn="3333" class="prcn">blah</div></td>
      <td><div data-prcn="1111" class="prcn ">blah</div><div data-prcn="3333" class="prcn">blah</div></td>
      <td><div data-prcn="1111" class="prcn">blah</div></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
        <tr>
      <td>2222</td>
      <td></td>
      <td><div data-prcn="2222" class="prcn">blah</div></td>
      <td><div data-prcn="2222" class="prcn">blah</div></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    </tbody>
</table>
?

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 =...