Make table overflow append to next table row in jQuery

Question

I have a span element appended to my table which stretches over many table dividers (the number of which is a variable in my code).

If this span overflows outside my table border, I want the remainder of the span to be appended to the next table row rather than extend outside the table.

For simplicity, I am appending the span to a single cell in this. In the code this is variable. I want something simpler than figuring whereabouts the cell is in the table, then calculating the remaining width blahblahblah...

$( document ).ready(function() {
  var $element = $('td#append');
  //7 will be a random number
  var length = 7*$element.width();  
  append_span = $element.append('</br><span style="width: '+length+'px"></span>');
});

table {
 border:1px solid navy;
 width: 70%;
 text-align: center;
}
table td {
 width: 100px;
 height: 100px;
 vertical-align: top;
 text-align: right;
 border: 1px solid #c6c6ec;
 position: relative;
  left: 0;
  position: relative;
}
span {
  display: inline-block;
  width: 300px;
  height: 30px;
  background-color: blue;
  z-index: 1;
  position:absolute; 
  border: solid black 1px;
}
div {
  position: relative;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div>
  <table>
    <tr>
      <td></td>
      <td id="append"></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
  </table>
</div>

1. How do I detect if the span overflows the table (I don't want to use a div, this gives incorrect results for me)

2. How do I move the remaining span to the next row... and so on?