'Create html table row without tr tag

Good morning to everybody. Using HTML, Bootstrap 5 and CSS I am creating a table which contains details of various articles. An article can have one or more variants, which in the context of the table are represented by a new row for each variant, placed below the row of the parent item. Is it possible to ensure that the variant lines are created inside the tr tag of the parent article, rather than in a totally separate tr tag, or that they are in any case interpreted as being part of the line of the parent article? This need arises from having to integrate this table with the jquery table sorter plugin, which should sort according to the details of the articles, not taking into account those of the variants.

I tried with the following code, but in doing so, variants rows appears before 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;">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>

EDIT: I need also a method to implement span behavior in sub row

htmlcsshtml-tablebootstrap-5


Solution 1:[1]

Starting with the excellent code provided by @Alohci, I have added some bootstrap classes to maintain the desired layout. I enclose the code if in the future it may be useful to someone

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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 InTiime

Related Questions