title: Rowspan not using top row
body: <p>I don't understand why my column won't span to the top and bottom rows I created. It is supposed to look like the "Today" column is taller on the top and bottom then the other columns.</p>
  
  <p>It's a lot of code, and I wasn't sure what I should cut without deforming it all or adding a new variable (it needs a fluid height).
  JSFiddle: <a href="http://jsfiddle.net/DaAwesomeP/aU9Le/" rel="nofollow noreferrer">http://jsfiddle.net/DaAwesomeP/aU9Le/</a></p>
  
  <p>Basic HTML Layout:</p>
  
  <pre><code>&lt;table id="weatherForecast"&gt;
    &lt;tr class="weatherForecast-row-outer"&gt;
      &lt;td&gt;&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr id="weatherForecast-row"&gt;
      &lt;td id="weatherForecast-DATE" class="weatherForecast-day  weatherForecast-day-today" rowspan="3"&gt;
      &lt;!-- Cell Content for "Today" Here --&gt;
        &lt;td id="weatherForecast-DATE" class="weatherForecast-day "&gt;
        &lt;!-- Cell Content Here --&gt;
        &lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr class="weatherForecast-row-outer"&gt;
        &lt;td&gt;&lt;/td&gt;
      &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>Here is an image that shows what I want:</p>
  
  <p><a href="https://i.stack.imgur.com/bMt5V.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/bMt5V.png" alt=""></a>
  </p>