title: Adjust vertical alignment of content upon hover
body: <p>I've got an interesting problem here:</p>
  
  <p>There is a table with a handful of cells, some of them have rowspans:</p>
  
  <pre><code>+----+----+----+----+
  |    |    | c4 | cx |
  |    | c2 +----+----+
  |    |    | c5 | cx |
  | c1 +----+----+----+
  |    |    | c6 | cx |
  |    | c3 +----+----+
  |    |    | c7 | cx |
  +----+----+---------+
  </code></pre>
  
  <p>When I hover over a row lets say the first row, I want to display it something like this</p>
  
  <pre><code>+----+----+----+----+
  | c1 | c2 | c4 | cx |
  |    |    +----+----+
  |    |    | c5 | cx |
  |    +----+----+----+
  |    |    | c6 | cx |
  |    | c3 +----+----+
  |    |    | c7 | cx |
  +----+----+---------+
  </code></pre>
  
  <p>So basically the values of the rowspan cells appear on the same row as the highlighted row. </p>
  
  <p>Here is a jsfiddle with the highlighting working:
  <a href="https://jsfiddle.net/ucarL9e9/1/" rel="nofollow noreferrer">https://jsfiddle.net/ucarL9e9/1/</a></p>
  
  <p>So whenever I highlight a row I want to temporary change the vertical alignment of the cell to make it with the row that highlighted. So something like this:</p>
  
  <p><a href="https://i.stack.imgur.com/Un4tP.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Un4tP.png" alt="enter image description here"></a></p>
  
  <p>I'm not worried about the color just the value of the cell. </p>
  
  <p><strong>EDIT</strong></p>
  
  <p>I got something working here but only want rowspan to be within its span</p>
  
  <p><a href="http://jsfiddle.net/jbb3f8yf/5/" rel="nofollow noreferrer">http://jsfiddle.net/jbb3f8yf/5/</a></p>
  
  <p>So  when I highlight the last row in the previous example in should be like this</p>
  
  <pre><code>+----+----+----+----+
  |    |    | c4 | cx |
  |    | c2 +----+----+
  |    |    | c5 | cx |
  |    +----+----+----+
  |    |    | c6 | cx |
  |    |    +----+----+
  | c1 | c3 | c7 | cx |
  +----+----+---------+
  </code></pre>