创建不带 tr 标签的 html table 行

Question

大家早上好。使用 HTML、Bootstrap 5 和 CSS 我正在创建一个 table，其中包含各种文章的详细信息。一篇文章可以有一个或多个变体，在 table 的上下文中，每个变体由一个新行表示，位于父项行的下方。是否可以确保变体行是在父文章的 tr 标签内创建的，而不是在完全独立的 tr 标签中创建的，或者它们在任何情况下都被解释为父文章行的一部分？这种需要是由于必须将此 table 与 jquery table 排序器插件集成，该插件应根据文章的详细信息进行排序，而不考虑变体的细节。

我尝试使用以下代码，但这样做时，变体行出现在 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>

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

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/

中查看带有 table 分类器逻辑的想法

Answer 2

从@Alohci 提供的优秀代码开始，我添加了一些 bootstrap 类以保持所需的布局。如果将来对某人有用，我会附上代码

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

创建不带 tr 标签的 html table 行

Create html table row without tr tag

html

css

html-table

bootstrap-5