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. I tried accomplishing this by adding rows above and below it and then using rowspan. For some reason, it only works on the bottom row.

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: http://jsfiddle.net/DaAwesomeP/aU9Le/

Basic HTML Layout (the full fiddle has the css:

<table id="weatherForecast">
  <tr class="weatherForecast-row-outer">
    <td></td>
  </tr>
  <tr id="weatherForecast-row">
    <td id="weatherForecast-DATE" class="weatherForecast-day  weatherForecast-day-today" rowspan="2">
    <!-- Cell Content for "Today" Here -->
      <td id="weatherForecast-DATE" class="weatherForecast-day ">
  <!-- Cell Content Here. There are 4 of these -->
      </td>
</tr>
    <tr class="weatherForecast-row-outer">
      <td></td>
    </tr>
</table>

An image showing what I am trying to accomplish: http://s14.postimg.org/ba3xwcm75/Rowspan_not_using_top_row.png