問題描述
Rowspan 不使用頂行 (Rowspan not using top row)
我不明白為什麼我的列不會跨越我創建的頂行和底行。它應該看起來像“今天”列的頂部和底部比其他列高。
代碼很多，我不確定應該在不變形的情況下剪切什麼或添加一個新變量（它需要一個流體高度）。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>
這是一張顯示我想要的圖片：
參考解法
方法 1:
The table markup violates the HTML table model rules, as the W3C HTML Validator tells you if you use it in HTML5 mode.
Since there are two cells on the second row, the first row should occupy two columns, too, so set colspan=2 on its td element.
And you cannot use rowspan=3, since there aren’t just enough rows in the table to span. Use rowspan=2 instead.
It’s difficult to tell what you actually want (a drawing would have helped), but the following would at least be valid HTML (note that I fixed a problem with duplicate id values too):
<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>
方法 2:
I got rid of the all of the rowspan and just gave one cell display: block. I can then adjust the height of that cell specifically without changing the others. I used calc to provide a variable height.
(by DaAwesomeP、Jukka K. Korpela、DaAwesomeP)