CSS显示：表格行组，将两个表格单元格分组在一起_Css_Html Table_Css Tables

CSS显示：表格行组，将两个表格单元格分组在一起

css

CSS显示：表格行组，将两个表格单元格分组在一起,css,html-table,css-tables,Css,Html Table,Css Tables,有人知道如何使用CSS显示属性值表行组将表中两行的两个单元格分组吗？我知道CSS中不存在rowspan，但表rowgroup被定义为等同于tbody，正如我在本文中所读到的在下面的代码中，我使用一些div创建了一个表，使用table作为CSS显示属性值。然后在这个全新的表中，我想将具有单元格角色的div分组，idrow2\u cell2和row3\u cell2。我尝试过这样做，但没有成功，使用CSS属性显示的值表行组：小提琴：你能帮我解决这个问题吗？非常感谢 table row g

有人知道如何使用CSS显示属性值表行组将表中两行的两个单元格分组吗？
我知道CSS中不存在rowspan，但表rowgroup被定义为等同于tbody，正如我在本文中所读到的

在下面的代码中，我使用一些div创建了一个表，使用table作为CSS显示属性值。然后在这个全新的表中，我想将具有单元格角色的div分组，id

row2\u cell2

和

row3\u cell2

。我尝试过这样做，但没有成功，使用CSS属性显示的值表行组：

小提琴：

你能帮我解决这个问题吗？非常感谢

table row group

仅适用于HTML中的table元素。因此，使用table而不是

divs

。您可以按照


布莱克先生{
边框样式：实心；
边框宽度：1px；
边界塌陷：塌陷；
填充：3倍；
}
.tbl{display:table；}
.row{显示：表行；}
.cel{display:表格单元格；}
.cpt{
显示：表格标题；
文本对齐：居中；
}
.thc{
显示：表格单元格；
背景色：#f2e8da；
文本对齐：居中；
字体大小：粗体；
}
.row:n个子（奇数）{背景色：#def；}
.row:n个子（偶数）{背景色：#fff；}
.row:悬停{背景色：#f2e8da；}
.tbody{显示：表行组}
.thead{display:table header group}
输入{
宽度：100%；
背景色：继承；
}
名称
形式
蛇
蛇
蛇

显示：表格行组也包含CSS表格。您好，欢迎使用SO，请先阅读。发布代码而不解释代码以及如何解决OP问题被认为不是一个好的答案。如果您想使用表标记：您可以使用tbody标记将行分组在一起，然后您可以使用tbody来完成此工作。someClassName>tr>td等，而不使用表行分组。在这里看到这个问题，特别是用户7195025的答案。如果不想使用表标记，请忽略此注释。
<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>

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