Question

是否有人知道如何使用CSS display 属性值 table-row-group 对表中两行的两个单元格进行分组？我知道在CSS rowspan 中不存在，但 table-row-group 被定义为等同于 tbody ，因为我可以在这里读到http://www.w3.org/TR/CSS21/tables.html#value-def-table-row-group

在下面的代码中，我使用了一些div来创建一个使用 table 作为CSS display 属性值的表。然后在这个全新的表中，我想将具有单元格角色的div组合在一起，ID为row2_cell2和row3_cell2。我试过这样做，但没有成功，使用CSS属性 display 的值 table-row-group ：

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

小提琴：http://jsfiddle.net/framj00/2eN3U/

请帮我解决这个问题吗？非常感谢！

Answer 1

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

Answer 2

table-row-group仅适用于HTML中的table元素。而不是divs使用table.You可以关注Fiddle

CSS显示：table-row-group，将两个表格单元组合在一起

2 个答案: