Create html table row without tr tag

Question

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

https://stackoverflow.com/questions/29229523/how-and-why-to-use-display-table-cell-css — JamesS, Jan 19 '22 at 11:36

Alohci · Accepted Answer · 2022-01-19T18:09:29.547

I wonder whether something like this might work for you:

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>

See this idea with table sorter logic at https://jsfiddle.net/Lb9ye6ta/

Would it be possible to replicate the behavior of the colspan attribute even in the columns enclosed by div? — InTiime, Feb 08 '22 at 12:02
@InTiime - Sorry, no. CSS still provides no mechanism for doing that. — Alohci, Feb 08 '22 at 12:11

score 0 · Answer 2 · answered Jan 20 '22 at 09:28

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>

Create html table row without tr tag

2 Answers2