Rowspan 不使用顶行答案

【问题标题】：Rowspan not using top rowRowspan 不使用顶行
【发布时间】：2013-11-13 04:54:57
【问题描述】：

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

代码很多，我不确定在不变形或添加新变量（它需要流体高度）的情况下应该剪切什么。 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>

这是显示我想要的图像：

【问题讨论】：

这个问题显然是关于尝试以违反 HTML 表格模型的方式使用 rowspan 和 colspan 解决设计问题。修改后的问题，带有指向页面和图像的链接，仍然含糊不清，需要解释，它要求设计帮助，所以这里是题外话。此外，这种方法可能是错误的：问题似乎是显示一个表格以便一个单元格被替换，这可能比 HTML 表格更好地处理 CSS 定位。

标签： html css html-table row

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

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

而且你不能使用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>

【讨论】：

我修复了rowspan，但colspan 没有做任何事情。您可以在小提琴中看到我的完整表格（实际上有五列）。我也尝试将其更改为五个。底行工作正常，但顶行不正常。我只希望第一列有rowspan。我还添加了一张图片。