How can you generate an HTML table row without using the <tr>

Greetings everyone! I am currently working on creating a table using HTML, Bootstrap 5, and CSS to display various article details. Each article may have one or multiple variants, and I would like these variants to be displayed as rows within the parent article's tr tag in order to integrate properly with the jQuery Table Sorter plugin for sorting based on article details only. I attempted to achieve this by adjusting the code below, but unfortunately the variant rows are appearing before the 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% polyester, 40% viscose</td>
      <td class="text-center">Weighted curtain</td>
      <td class="text-center">50 € (25+ meters)<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% polyester, 40% viscose</td>
      <td class="text-center">Weighted curtain</td>
      <td class="text-center">50 € (25+ meters)<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: Additionally, I require a method to implement span behavior in subrows.

htmlcsshtml-tablebootstrap-5

Answer №1

Have you thought about trying something like the following?

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>

To see this concept in action with table sorter logic visit https://jsfiddle.net/Lb9ye6ta/

Answer №2

After building upon the exceptional foundation provided by @Alohci, I have incorporated some bootstrap classes to uphold the desired structure. I am sharing the code here in case it proves beneficial to someone in the future

<header>
      <style>
         tbody, thead {
            display: contents;
         }
         tr {
            display: table-row-group;
         }
         td.row {
            display: table-row;
            background: rgba(200, 197, 255, 0.63);
         }
         td.row div {
            display: table-cell;
          }
      </style>
   </header>

   <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">ITEM</th>
                       <th class="text-uppercase text-center text-white bg-dark col-1">type</th>
                       <th class="text-uppercase text-center text-white bg-dark col-1">height</th>
                       <th class="text-uppercase text-center text-white bg-dark col-3">composition</th>
                       <th class="text-uppercase text-center text-white bg-dark col-3">description</th>
                       <th class="text-uppercase text-center text-white bg-dark col-1">price per piece</th>
                       <th class="text-uppercase text-center text-white bg-dark col-1">unit price</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% polyester, 40% viscose</td>
                      <td class="text-center col-3">Weighted curtain</td>
                      <td class="text-center col-1">50 € (25+ m)<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% polyester, 30% viscose, 10% cotton</td>
                      <td class="text-center col-3">Weighted curtain</td>
                      <td class="text-center col-1">50 € (25+ m)<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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Nested flexbox causing Firefox to malfunction in handling overflow-y

I successfully created a layout using CSS3 flexbox that spans 100% width and height. This layout functions properly on IE11, and possibly on IE10 when emulating IE11. Unfortunately, I encountered an issue with Firefox (35.0.1) where the overflow-y propert ...

cssfirefoxoverflowflexbox

CSS not aligning email header correctly

I have been given the task of coding an HTML email for mailing campaigns. I have managed to get everything working, except for a particular piece of code. What I am trying to accomplish is having an image with other elements on top such as titles, a button ...

htmlcssemailoutlook

Executing a script for every row in a table using Python and Selenium

As a newcomer to Python and Selenium, I have been struggling with a specific task for days now. Despite my efforts to search and experiment, I find myself completely stuck. My goal is to access sales records within a table that contains information about ...

pythonhtmlseleniumhtml-table

Timepicker Bootstrapping

I've been searching for a time picker widget that works well with Bootstrap styling. The jdewit widget has a great style, but unfortunately it comes with a lot of bugs. I'm on a tight deadline for my project and don't have the time to deal w ...

javascripthtmltwitter-bootstraptimepicker

"Enhanced Web Interactions with JavaScript Animations

I've been diving into my JavaScript project lately. I'm currently focusing on creating some cool animations, particularly one that involves making a ball bounce up and down. My code seems to work flawlessly for the downward bounce, but I'm f ...

javascripthtmlcss

The web font fails to display on different computers

Recently, I discovered that my website only displays the font "Open Sans" correctly on my personal computer. When I tried to access it from two other PCs, the font was not displaying as intended. Strangely, the font appears fine on smartphones. What could ...

htmlcss

javascript - determine whether a hyperlink has been accessed

Is there a method to determine if a link has been visited? In Firefox, the color of a link changes after clicking on it, which leads me to believe it is possible. Edit: This question pertains to a Firefox extension, so I am unable to modify the HTML or CS ...

javascriptcsshyperlink

Is it possible to dynamically change HTML content by utilizing a JSON file?

Looking to implement a JavaScript loop (using jQuery) that can dynamically populate the HTML file with content from a JSON file based on matching <div> ids to the JSON "id" values. The solution should be scalable and able to handle any number of < ...

javascriptjqueryhtmljsonloops

Guide to incorporating animated material icons in vuetify

in Vuetify makes it easy to utilize mainstream material design icons through the use of the v-icon component. An example of this would be: <v-icon>home</v-icon> I am curious if animated material icons are supported and can be integrated in ...

cssanimationvue.jsvuetify.jsgoogle-material-icons

Manipulating Objects with CSS Transform in Global/Local Coordinates

If we take a closer look at our setup: <div id="outside"> <div id="inside">Foo</div> </div> and apply a rotation to the outer element - let's say turning it 45 degrees clockwise: <div id="outside" style="transform: ro ...

javascripthtmlcss

Stacking of div elements is not possible when they have a position relative

To summarize, I created a container div (parent) with a relative position and then added 3 children divs with absolute positions. Now, I am attempting to add another div that should appear below all of this content, essentially representing the next sectio ...

htmlcss

Exploring Angular2's interaction with HTML5 local storage

Currently, I am following a tutorial on authentication in Angular2 which can be found at the following link: https://medium.com/@blacksonic86/authentication-in-angular-2-958052c64492 I have encountered an issue with the code snippet below: import localSt ...

javascripthtmlangulartypescriptlocal-storage

Utilizing HTTPS for all links in the source code of Magento

Recently, I encountered a situation while installing a fresh version of Magento v1.7.0 on my VPS running nginx. After uploading the clean install to public_html, unzipping it, and attempting to run the install by entering my IP (xx.x.xxx.xxx:8086), I initi ...

html.htaccessmagentomod-rewrite

How to center a video horizontally using Bootstrap styling

In my search for a solution, I have not been able to find a way to horizontally center a video within a Bootstrap div or header section while also keeping the video vertically aligned with the top. The div or header section has a 100% width with fixed heig ...

htmlcsstwitter-bootstrapvideohtml5-video

Creating a consolidated HTML table by extracting and comparing data from various JSON files

Being new to JS and JSON, I am struggling to find a suitable solution that works for me. I have two distinct json files. The first one: players.json contains the following data: { "players": [ { "id": 109191123, "surnam ...

javascripthtmljson

Tips for halting the movement of marquee text once it reaches the center briefly before resuming animation

Is there a way to make text slide in, pause when centered, and then repeat the process? I'm looking for some help with this animation. Here is the code snippet: <marquee direction="left" id="artistslide"> <span id="currentartist">< ...

javascriptjqueryhtmlmarquee

Setting the height of the text area in a three-column layout cannot be achieved using a percentage value

I'm working on creating a 3-column layout with two text areas. The issue I'm facing is that when I adjust the width of the text areas to create columns, the height shrinks. I need a solution that will be compatible with HTML5 browsers - support f ...

csshtmllayout

Employing a custom JavaScript function to pass the value as a parameter within the <asp:QueryStringParameter> tag

I have a dilemma with using SelectParameters: <SelectParameters> <asp:QueryStringParameter Name="Store" DbType="String" Direction="Input" QueryStringField="Name" DefaultValue="fetchURL();" ConvertEmptyStringToNull="True" /> </SelectPara ...

javascripthtmlfunctionurlquerystringparameter

Seeking assistance with setting up checkboxes to sort through elements in an array

As a beginner in the world of HTML, JavaScript, and CSS, I have a basic understanding of these languages. My current class project requires me to create checkboxes that can filter out content from an array based on the presence of a certain letter in the a ...

javascripthtmlarraysbuttoncheckbox

AngularJS - new counter created for each row inserted

Apologies for any language mistakes as I am new to utilizing angularjs. I have developed a system where individuals can enter their names in a break list. Below is the simple code I have used for this feature. Angular JS function ExampleCtrl($scope){ ...

javascriptjqueryhtmlangularjs