大家早上好。我使用HTML、Bootstrap 5和CSS创建了一个表，其中包含各种文章的详细信息。一个项目可以有一个或多个变体，在表的上下文中，每个变体都有一个新行，放在父项的行下面。是否可以确保变体行是在父文章的tr标记中创建的，而不是在一个完全独立的tr标记内创建的，或者它们在任何情况下都被解释为父文章行的一部分？这种需求源于必须将该表与jquery表分类器插件集成，该插件应根据文章的详细信息进行排序，而不考虑变体的详细信息。
我尝试使用以下代码，但在这样做的过程中，变量行出现在表之前。
<tbody>
<tr style="text-align: center; background: rgba(252,212,212,0.63);">
<td class="text-center" style="font-weight: bold;">AAA</td>
<td class="text-center">T1</td>
<td class="text-center">300 cm</td>
<td class="text-center">60% poliestere, 40% viscosa</td>
<td class="text-center">Tenda piombata</td>
<td class="text-center">50 € (25+ mtl)<br /></td>
<td class="text-center">75 €<br /></td>
</tr>
<tr style="text-align: center; background: rgba(252,212,212,0.63);">
<td class="text-center" style="font-weight: bold;">AAA</td>
<td class="text-center">T1</td>
<td class="text-center">300 cm</td>
<td class="text-center">60% poliestere, 40% viscosa</td>
<td class="text-center">Tenda piombata</td>
<td class="text-center">50 € (25+ mtl)<br /></td>
<td class="text-center">75 €<br /></td>
<div class="row" style="background: rgb(200 197 255 / 63%)">
<div class="text-center col-2">2649</div>
<div class="text-center col-1">//</div>
<div class="text-center col-1">//</div>
<div class="text-center col-3">//</div>
<div class="text-center col-3">//</div>
<div class="text-center col-1">//</div>
<div class="text-center col-1">//</div>
</div>
</tr>
</tbody>
编辑：我还需要一种方法来实现子行中的跨度行为
我想知道这样的东西是否适用于您：
tbody, thead {
display: contents;
}
tr {
display: table-row-group;
}
td.row {
display: table-row;
background: rgb(200 197 255 / 63%);
}
td.row div {
display: table-cell;
}<table>
<tbody>
<tr style="text-align: center; background: rgba(252,212,212,0.63);">
<td class="text-center" style="font-weight: bold;">AAA</td>
<td class="text-center">T1</td>
<td class="text-center">300 cm</td>
<td class="text-center">60% poliestere, 40% viscosa</td>
<td class="text-center">Tenda piombata</td>
<td class="text-center">50 € (25+ mtl)<br /></td>
<td class="text-center">75 €<br /></td>
</tr>
<tr style="text-align: center; background: rgba(252,212,212,0.63);">
<td class="text-center" style="font-weight: bold;">BBB</td>
<td class="text-center">T1</td>
<td class="text-center">100 cm</td>
<td class="text-center">60% poliestere, 30% viscosa, 10% cotone</td>
<td class="text-center">Tenda piombata</td>
<td class="text-center">50 € (25+ mtl)<br /></td>
<td class="text-center">75 €<br /></td>
<td class="row">
<div class="text-center">2649</div>
<div class="text-center">//</div>
<div class="text-center">//</div>
<div class="text-center">//</div>
<div class="text-center">//</div>
<div class="text-center">//</div>
<div class="text-center">//</div>
</td>
<td class="row">
<div class="text-center">8765</div>
<div class="text-center">//</div>
<div class="text-center">//</div>
<div class="text-center">//</div>
<div class="text-center">//</div>
<div class="text-center">//</div>
<div class="text-center">//</div>
</td>
</tr>
<tr style="text-align: center; background: rgba(252,212,212,0.63);">
<td class="text-center" style="font-weight: bold;">CCC</td>
<td class="text-center">T1</td>
<td class="text-center">800 cm</td>
<td class="text-center">60% poliestere, 30% viscosa, 10% cotone</td>
<td class="text-center">Tenda piombata</td>
<td class="text-center">50 € (25+ mtl)<br /></td>
<td class="text-center">75 €<br /></td>
<td class="row">
<div class="text-center">4598</div>
<div class="text-center">//</div>
<div class="text-center">//</div>
<div class="text-center">//</div>
<div class="text-center">//</div>
<div class="text-center">//</div>
<div class="text-center">//</div>
</td>
</tr>
</tbody>
</table>请参阅表分类器逻辑https://jsfiddle.net/Lb9ye6ta/
从@Alohci提供的优秀代码开始，我添加了一些引导类来维护所需的布局。如果将来对有用，我会附上代码
<head>
<style>
tbody, thead {
display: contents;
}
tr {
display: table-row-group;
}
td.row {
display: table-row;
background: rgb(200 197 255 / 63%);
}
td.row div {
display: table-cell;
}
</style>
</head>
<body style="background-color: #ffebaf;">
<div class="table-responsive">
<table class="table table-striped table-hover table-sm">
<thead>
<tr>
<th class="text-uppercase text-center text-white bg-dark col-2">ARTICOLO</th>
<th class="text-uppercase text-center text-white bg-dark col-1">tipologia</th>
<th class="text-uppercase text-center text-white bg-dark col-1">altezza</th>
<th class="text-uppercase text-center text-white bg-dark col-3">composizione</th>
<th class="text-uppercase text-center text-white bg-dark col-3">descrizione</th>
<th class="text-uppercase text-center text-white bg-dark col-1">prezzo pezza</th>
<th class="text-uppercase text-center text-white bg-dark col-1">prezzo unita</th>
</tr>
</thead>
<tbody>
<tr style="text-align: center; background: rgba(252,212,212,0.63);">
<td class="text-center col-2" style="font-weight: bold;">AAA</td>
<td class="text-center col-1">T1</td>
<td class="text-center col-1">300 cm</td>
<td class="text-center col-3">60% poliestere, 40% viscosa</td>
<td class="text-center col-3">Tenda piombata</td>
<td class="text-center col-1">50 € (25+ mtl)<br /></td>
<td class="text-center col-1">75 €<br /></td>
</tr>
<tr style="text-align: center; background: rgba(252,212,212,0.63);">
<td class="text-center col-2" style="font-weight: bold;">BBB</td>
<td class="text-center col-1">T1</td>
<td class="text-center col-1">100 cm</td>
<td class="text-center col-3">60% poliestere, 30% viscosa, 10% cotone</td>
<td class="text-center col-3">Tenda piombata</td>
<td class="text-center col-1">50 € (25+ mtl)<br /></td>
<td class="text-cente col-1">75 €</td>
<td class="row">
<div class="text-center col-2">2649</div>
<div class="text-center col-1">//</div>
<div class="text-center col-1">//</div>
<div class="text-center col-3">//</div>
<div class="text-center col-3">//</div>
<div class="text-center col-1">//</div>
<div class="text-center col-1">//</div>
</td>
</tr>
</tbody>
</table>
</div>
</body>