创建没有 tr 标签的 html 表格行

Question

大家早上好。 使用 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>

编辑：我还需要一种在子行中实现跨度行为的方法

Answer 1

我想知道这样的事情是否适合你：

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/https://jsfiddle.net/Lb9ye6ta/查看这个想法与表排序逻辑

Answer 2

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