Rowspan不使用第一行

我不明白爲什麼我的列不會跨越我創建的頂部和底部行。它應該看起來像「今日」列在頂部和底部，然後是其他列較高。Rowspan不使用第一行

這是很多代碼，我不確定我應該切割什麼而不變形或添加一個新變量（它需要一個流體高度）。的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>

這裏是一個形象，顯示了我想要的：

來源

2013-11-01 DaAwesomeP

這個問題顯然是關於嘗試解決使用'rowspan'和'colspan'違反HTML表格模型的設計問題。修改過的問題，包含頁面和圖像的鏈接，仍然模糊不清，需要進行解釋，並且需要設計幫助，因此在這裏是無關緊要的。此外，該方法可能是錯誤的：問題似乎是顯示一個表格，以便一個單元格被移動，這可能比HTML表格更好地處理CSS定位。 –

我擺脫了所有的rowspan，只給了一個單元格display: block。然後，我可以專門調整該單元格的高度，而不用更改其他單元格。我使用calc來提供可變的高度。

來源

2014-01-05 04:21:29 DaAwesomeP

表格標記違反了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>

來源

2013-11-01 23:49:40

我修復了'rowspan'，但是'colspan'沒有做任何事情。你可以在小提琴中看到我的整個桌子（實際上有五列）。我試着將它改爲五個。最下面的一行工作正常，但最上面的一行沒有。我只想要第一列有'rowspan'。我還添加了一張圖片。 – DaAwesomeP

Rowspan不使用第一行

回答

相關問題