CSS 显示：table-row-group，将两个表格单元格组合在一起
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23009709/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS display: table-row-group, to group two table cells together
提问by JB-Franco
Does anybody knows how to group two cells of two rows in a table, using CSS displayproperty value table-row-group?
I know that in CSS rowspandoesn't exist but table-row-groupis defined to be equivalent to tbodyas I can read in this http://www.w3.org/TR/CSS21/tables.html#value-def-table-row-group.
有人知道如何使用 CSS显示属性值table-row-group将表格中两行的两个单元格分组吗？
我知道在 CSS rowspan中不存在，但table-row-group被定义为等效于tbody，因为我可以在这个http://www.w3.org/TR/CSS21/tables.html#value-def 中阅读-表行组。
In the following code, I used some divs to create a table using tableas CSS displayproperty value. Then in this brand new table, I want to group together the divs having the role of cells, with id row2_cell2and row3_cell2. I have tried to do it, but, without success, using the value table-row-groupof the CSS property display:
在下面的代码中，我使用了一些 div 来创建一个表格，使用table作为 CSS显示属性值。然后在这个全新的表格中，我想将具有单元格角色的 div 组合在一起， idrow2_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>
Fiddle: http://jsfiddle.net/framj00/2eN3U/
小提琴：http: //jsfiddle.net/framj00/2eN3U/
Can you help me please to resolve this problem? many thanks!
你能帮我解决这个问题吗？非常感谢！
采纳答案by neel shah
回答by Peter Chuk
<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>
