DIVとCSSはどのようにRowspan＆Colspanで動作しますか？

Question

私はdivを使用して表のセルを作成し、セルをマージする方法について数日を研究しましたが、実際にはTABLEでこれを行うことはできますが、DIVで同じ画面の結果を行うことはできません。またはコードを修正してください。

実際には、フルスクリーンモードで同じ幅と高さ（結合された領域を除く）にすべてのセルを作成したいのですが、問題は中央にマージされたセルでした。私は多くのメソッドが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

ウィッシュ誰かがコードを修正することができます！そのように、あなたのマージされた列に別のクラスを追加する

Answer 1

試してみてください。そうのような

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

とマージされたエリアのCSSを変更、：

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

私はこれをしなかった理由はあなたのためでありますあなたの統合された領域に同じクラスを持っていましたが、通常のセルのスペースの2倍のサイズを使いたいと思っていました。だから私がしたのは、所望の結果を得るために、マージされた領域の幅と高さを変更するクラスを追加することでした。

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