CODEWITHSUNDEEP
csshtml-tablecss-tables
JB-Franco
JB-Franco

Reputation: 256

CSS display: table-row-group, to group two table cells together

Does anybody knows how to group two cells of two rows in a table, using CSS display property value table-row-group?
I know that in CSS rowspan doesn't exist but table-row-group is defined to be equivalent to tbody as I can read in this http://www.w3.org/TR/CSS21/tables.html#value-def-table-row-group.

In the following code, I used some divs to create a table using table as CSS display property value. Then in this brand new table, I want to group together the divs having the role of cells, with id row2_cell2 and row3_cell2. I have tried to do it, but, without success, using the value table-row-group of the CSS property display:

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

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

Can you help me please to resolve this problem? many thanks!

Upvotes: 5

Views: 54900

Answers (2)

Peter Chuk
Peter Chuk

Reputation: 31

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

Upvotes: 3

neel shah
neel shah

Reputation: 2271

table-row-group works only with table element in HTML.So instead of divs use table.You can follow the Fiddle

Upvotes: 3

Related Questions