title: Hide div under some table cells but not another ?
body: <p>In this example</p>
  
  <pre><code>&lt;table&gt;
  &lt;tr&gt;
      &lt;td class="top"&gt;
         1 &lt;div id="overlay"&gt;&lt;/div&gt;
      &lt;/td&gt;
      &lt;td&gt;2&lt;/td&gt;
      &lt;td&gt;3&lt;/td&gt;
      &lt;td&gt;4&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
      &lt;td class="top"&gt;5&lt;/td&gt;
      &lt;td&gt;6&lt;/td&gt;
      &lt;td&gt;7&lt;/td&gt;
      &lt;td&gt;8&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
      &lt;td class="top"&gt;9&lt;/td&gt;
      &lt;td&gt;10&lt;/td&gt;
      &lt;td&gt;11&lt;/td&gt;
      &lt;td&gt;12&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
      &lt;td class="top"&gt;13&lt;/td&gt;
      &lt;td&gt;14&lt;/td&gt;
      &lt;td&gt;15&lt;/td&gt;
      &lt;td&gt;16&lt;/td&gt;
  &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>CSS: </p>
  
  <pre><code>td {
  width:50px;
  height:50px;
  background:#aaa;
  }
  #overlay {
  top:100px;
  left:30px;
  background:#0a0;
  width:100px;
  height:100px;
  position:absolute;
  z-index:0;
  }
  
  .top{
  background:#333;
  z-index:100; 
  }
  </code></pre>
  
  <p>Demo: </p>
  
  <p><a href="http://jsfiddle.net/4dfppb7k/" rel="nofollow">http://jsfiddle.net/4dfppb7k/</a></p>
  
  <p>The overlay move dynamically with the mouse. </p>
  
  <p>How can I  make the overlay div goes under the first column ( cells : 1,5,9,13) but over the rest of the table cells ? </p>