CSS display: table-row-group, groupe de deux cellules d'un tableau ensemble

Quelqu'un sait comment groupe de deux cellules de deux lignes dans un tableau, à l'aide de CSS affichage la valeur de la propriété table-row-group?
Je sais que dans le CSS rowspan n'existe pas, mais table-row-group est défini pour être équivalent à tbody que je peux lire dans ce http://www.w3.org/TR/CSS21/tables.html#value-def-table-row-group.

Dans le code suivant, j'ai utilisé des divs pour créer une table à l'aide de table CSS affichage la valeur de la propriété. Puis dans cette nouvelle table, je veux regrouper les divs avoir le rôle des cellules, avec l'id row2_cell2 et row3_cell2. J'ai essayé de le faire, mais, sans succès, à l'aide de la valeur table-row-group de la propriété CSS affichage:

<div id='table'>
    <div class='row'>
        <div class='cell'>
        </div>
        <div class='cell'>
        </div>
     </div>
     <div class='row_group'>
        <div id='row_2' class='row'>
            <div class='cell'>
            </div>
            <div id='row2_cell2' class='cell'>
            </div>
        </div>
        <div id='row_footer' class='row'>
            <div class='cell'>
            </div>
            <div id='row3_cell2' class='cell'>
            </div>
        </div>
    </div>
</div>

Violon: http://jsfiddle.net/framj00/2eN3U/

Pouvez-vous m'aider svp à résoudre ce problème? merci beaucoup!

OriginalL'auteur JB-Franco | 2014-04-11

  1. 2

    table-row-group fonctionne uniquement avec de l'élément de tableau en HTML.Ainsi, au lieu de divs utilisation de la table.Vous pouvez suivre les Violon

    display:table-row-group semble avec le CSS tables de, trop.

    OriginalL'auteur neel shah

  2. 3
    <html>
<head>
<style>
.black {
border-style: solid;
border-width: 1px;
border-collapse: collapse;
padding: 3px;
}
.tbl { display: table; }
.row { display: table-row; }
.cel { display: table-cell; }
.cpt {
display: table-caption;
text-align: center;
}
.thc {
display: table-cell;
background-color:#f2e8da;
text-align: center;
font-weight: bold;
}
.row:nth-child(odd)  { background-color: #def; }
.row:nth-child(even) { background-color: #fff; }
.row:hover {background-color:#f2e8da; }
.tbody { display: table-row-group }
.thead { display: table-header-group }
input {
width: 100%;
background-color: inherit;
}
</style>
</head>
<body>
<div class="tbl black">
<div class="cpt"><input type="search" placeholder="search me"/></div>
<div class="thead">
<div class="row black">
<div class="thc black">name</div>
<div class="thc black">form</div>
</div>
</div>
<div class="tbody" id="data">
<form class="row black">
<div class="cel black">snake<input type="hidden" name="cartitem" value="55"></div>
<div class="cel black"><input name="count" value="1"/></div>
</form>
<form class="row black">
<div class="cel black">snake<input type="hidden" name="cartitem" value="55"></div>
<div class="cel black"><input name="count" value="2"/></div>
</form>
<form class="row black">
<div class="cel black">snake<input type="hidden" name="cartitem" value="55"></div>
<div class="cel black"><input name="count" value="3"/></div>
</form>
</div>
</div>
</body>
</html>
    Salut et bienvenue, merci de lire Comment puis-je écrire une bonne réponse? la première. L'affichage d'un code sans l'expliquer et comment vous parvenez à résoudre les OP problème n'est pas considéré comme une bonne réponse.

    OriginalL'auteur Peter Chuk