DIV＆CSS如何與Rowspan＆Colspan合作？

我已經研究了幾天關於如何使用div來創建表格單元格和合並單元格，其實我可以用TABLE做到這一點，但不能在DIV中做同樣的屏幕結果，希望有人能幫助我開發更好的方法或修復代碼。DIV＆CSS如何與Rowspan＆Colspan合作？

實際上，我想在全屏模式下使所有單元格的寬度和高度相同（合併區域除外），但問題在於合併單元格在中心。我嘗試了很多方法無法使它像TABLE樣式一樣工作。

這裏是我想要的結果，但要符合表：

<style> 
html, body{ 
    width:100%; 
    height:100%; 
    margin:0; 
    padding:0; 
} 
table { 
    border-width: 1px 1px 0px 0px; 
    border-spacing:0; 
    margin:0; 
    padding:0; 
    width: 100%; 
    height: 100%; 
} 
td { 
    border-width: 0px 0px 1px 1px; 
} 
table, td { 
    border-style: solid; 
    border-color: purple; 
} 
.w25 { 
    width:25%; 
    height:25%; 
} 
.w50 { 
    width:50%; 
    height:50%; 
} 
.w100 { 
    width:100%; 
    height:100%; 
} 
</style> 
<table class='w100'> 
    <tr> 
     <td class='w25'>D</td> 
     <td class='w25'>E</td> 
     <td class='w25'>F</td> 
     <td class='w25'>G</td> 
    </tr> 
    <tr> 
     <td class='w25'>C</td> 
     <td class='w50' colspan=2 rowspan=2 >MERGED AREA</td> 
     <td class='w25'>H</td> 
    </tr> 
    <tr> 
     <td class='w25'>B</td> 
     <td class='w25'>I</td> 
    </tr> 
    <tr> 
     <td class='w25'>A</td> 
     <td class='w25'>L</td> 
     <td class='w25'>K</td> 
     <td class='w25'>J</td> 
    </tr> 
</table>

這是我目前正在爲DIV版本的代碼，但沒有成功平衡所有的寬度和高度全屏顯示。

<style> 
html, body{ 
    width:100%; 
    height:100%; 
    margin:0; 
    padding:0; 
} 
.table { 
    border-width: 1px 1px 0px 0px; 
} 
.intable { 
    border-width: 0px 1px 0px 0px; 
} 
.table, .intable { 
    display:table; 
    width:100%; 
    height:100%; 
} 
.cell { 
    display:table-cell; 
} 
.row { 
    display:table-row; 
} 
.cell { 
    border-width: 0px 0px 1px 1px; 
    width:25%; 
} 
.table, .intable, .cell { 
    border-style: solid; 
    border-color: purple; 
} 
</style> 
<div class='table'> 
    <div class='row'> 
     <div class='cell' style="max-width:25%;">D</div> 
     <div class='intable'> 
      <div class='cell'>E</div> 
      <div class='cell'>F</div> 
     </div> 
     <div class='cell'>G</div> 
    </div> 
    <div class='row'> 
     <div class='intable'> 
     <div class='row'> 
      <div class='cell'>C</div> 
     </div> 
     <div class='row'> 
      <div class='cell'>B</div> 
     </div> 
     </div> 
     <div class='cell'>Merged Area</div> 
     <div class='intable'> 
     <div class='row'> 
      <div class='cell'>H</div> 
     </div> 
     <div class='row'> 
      <div class='cell'>I</div> 
     </div> 
     </div> 
    </div> 
    <div class='row'> 
     <div class='cell'>A</div> 
     <div class='intable'> 
      <div class='cell'>L</div> 
      <div class='cell'>K</div> 
     </div> 
     <div class='cell'>J</div> 
    </div> 
</div>

Table Version JSFiddle

DIV Version JSFiddle

希望有人可以修復代碼！

來源

2017-02-24 Andy Cheng

問題是什麼？在使用CSS表格時，例如使用'display：table'等，而不是HTML'table'元素，你似乎在問如何模擬HTML'colspan'和'rowspan'。你試圖做到這一點並不明顯。但無論如何，答案是你不能：CSS表模型本質上比HTML表模型簡單。 –

我會建議去使用'table'結構或使用帶有'display：inline-block'屬性的'divs'重構。 'display：table'＆'display：table-row'會對你的結構造成破壞。 – nashcheez

謝謝你的建議！ –

嘗試增加其他類到您的合併列，就像這樣：

<div class='cell merged'>Merged Area</div>

，並更改合併區域的CSS，像這樣：

.merged{ 
    width:50%; 
    height:50%; 
}

我之所以這樣做，是因爲你在你的合併區域有同樣的班級，但你希望這個大小佔用一個正常小區的兩倍。所以我所做的只是添加一個額外的類，改變合併區域的寬度和高度以獲得所需的結果。

這裏是一個更新的小提琴：

https://jsfiddle.net/6hx2uooz/4/

來源

2017-02-24 12:54:01

感謝您的回答，它的工作原理與我想要的一樣，非常感謝！ –

很酷。沒問題！ –

DIV＆CSS如何與Rowspan＆Colspan合作？

回答

相關問題