0

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

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

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

4

2 回答 2

0

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

于 2014-01-05T04:21:29.147 回答
0

表格标记违反了 HTML 表格模型规则，因为 W3C HTML验证器会告诉您是否在 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>

于 2013-11-01T23:49:40.540 回答