Comment DIV et CSS fonctionnent-ils avec Rowspan et Colspan ?

Question

J'ai étudié quelques jours comment utiliser div pour créer des cellules de tableau et des cellules de fusion, en fait je peux le faire avec TABLE, mais je ne peux pas faire le même résultat avec DIV, j'espère que quelqu'un pourra m'aider à trouver la meilleure méthode ou à corriger le code.

En fait, je veux que toutes les cellules aient la même largeur et la même hauteur (sauf la zone fusionnée) en mode plein écran, mais le problème est que la cellule fusionnée est au centre. J'ai essayé de nombreuses méthodes, mais je n'ai pas réussi à faire en sorte que cela fonctionne comme dans le style TABLE.

Voici le résultat que je souhaite, mais à faire avec le tableau :

<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>

Et voici le code que je suis en train de faire pour la version DIV, mais je n'ai pas réussi à équilibrer la largeur et la hauteur en plein écran.

<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>

Tableau Version JSFiddle

Version DIV JSFiddle

J'espère que quelqu'un pourra corriger le code !

Answer 1

Essayez d'ajouter une autre classe à votre colonne fusionnée, comme suit :

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

et modifiez le code CSS de la zone fusionnée, comme suit :

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

La raison pour laquelle j'ai fait cela est que vous aviez la même classe sur votre zone fusionnée, mais que vous vouliez que la taille prenne le double de l'espace d'une cellule normale. J'ai donc simplement ajouté une classe supplémentaire modifiant la largeur et la hauteur de la zone fusionnée pour obtenir le résultat souhaité.

Voici un Fiddle mis à jour :

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