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
