Rowspan不使用顶行

Question

我不明白为什么我的专栏不会跨越我创建的顶行和底行。它应该看起来像“今天”列在顶部和底部比其他列更高。

这是很多代码，我不确定在不变形或添加新变量（它需要流体高度）的情况下应该切割什么。 JSFiddle：http://jsfiddle.net/DaAwesomeP/aU9Le/

基本HTML布局：

<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="3">
    <!-- Cell Content for "Today" Here -->
      <td id="weatherForecast-DATE" class="weatherForecast-day ">
      <!-- Cell Content Here -->
      </td>
    </tr>
    <tr class="weatherForecast-row-outer">
      <td></td>
    </tr>
</table>

这是一张显示我想要的图片：

Answer 1

表格标记违反了HTML表格模型规则，因为W3C HTML Validator会告诉您是否在HTML5模式下使用它。

由于第二行有两个单元格，第一行也应占据两列，因此在colspan=2元素上设置td。

并且你不能使用rowspan=3，因为表中没有足够的行可以跨越。请改用rowspan=2。

很难说出你真正想要的东西（图画会有所帮助），但以下内容至少是有效的HTML（请注意，我也修复了重复id值的问题）：

<table id="weatherForecast" border>
  <tr class="weatherForecast-row-outer">
    <td colspan=2></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-DATE2" class="weatherForecast-day ">
      <!-- Cell Content Here -->
      </td>
    </tr>
    <tr class="weatherForecast-row-outer">
      <td></td>
    </tr>

Answer 2

我摆脱了所有rowspan，只给了一个单元格display: block。然后，我可以专门调整该单元格的高度而不更改其他单元格。我使用calc来提供可变高度。