Angular: HTML table with two rows inside each tr element

Question

Apparently this question has already been answered here: Generating Two Table Rows With *ngFor

I'm trying to achieve a HTML table, whose tr elements each have two available rows. I'm integrating this with an app using the Angular framework and bootstrap. I want to avoid nested tables as they can be really messy.

The reason I want to do this is so that I can have all my fields in the first row, and then a second row which appears empty, but will be populated with a success / error message when appropriate.

<!-- Example code -->
<table>
  <thead>
    <th>Field 1</th>
    <th>Field 2</th>
    <th>Field 3</th>
  </thead>
  <tbody>
    <tr *ngFor="row in rows">
      <td>...</td>
      <td>...</td>
      <td>...</td>
    </tr>
  </tbody>
</table>

and each tr looks something like this:

[Field 1] [Field 2] [Field 3]

What I want to achieve is for each tr to look like this:

[Field 1] [Field 2] [Field 3]
[ - second row inside tr -- ]

EDIT: Including a diagram of what I'm hoping to achieve

Suryansh Singh · Accepted Answer · 2021-06-29 16:16:44Z

1

May be you can do this:

<table border="2">
  <caption> Demo table</caption>
  <thead>
    <th>Field 1</th>
    <th>Field 2</th>
    <th>Field 3</th>
  </thead>
  <tbody>
    <tr>
      <thead>
        <th>Field 1</th>
        <th>Field 2</th>
        <th>Field 3</th>
      </thead>
  <tbody>
    <tr>
      <td colspan="3"> -- second row inside tr -- </td>
    </tr>
  </tbody>
  </tr>
  <tr>
    <thead>
      <th>Field 1</th>
      <th>Field 2</th>
      <th>Field 3</th>
    </thead>
    <tbody>
      <tr>
        <td colspan="3"> -- second row inside tr -- </td>
      </tr>
    </tbody>
  </tr>
  </tbody>
</table>

answered Jun 29, 2021 at 16:16

Suryansh Singh

1,1939 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

anirudh Over a year ago

there's no need you add <th> so many times. It can be misleading when accessing in CSS as a table should have only one <th> ideally

Suryansh Singh Over a year ago

@anirudh Different Table inside table row , and different table having different table head. That was my reasoning. User can change according to his needs.

anirudh Over a year ago

This seems a bit redundant. Check out my answer once

Mario Over a year ago

Thank you @SuryanshSingh for the reply! Unfortunately this does uses nested tables (somewhat), which is what I was hoping to avoid. Especially if rows contains anything more than three elements, you can see how the code will be cluttered immediately.

Suryansh Singh Over a year ago

@MariosYiannakou I have no knowledge about angular but i was looking for this problem i came across this answer where, they work around to emulate the colspan in css: stackoverflow.com/a/3109087/15387341

anirudh · Accepted Answer · 2021-06-29 16:37:56Z

1

You can use colspan="3" for <td> for subtext as below-

Code

 table, th, td {
      border: 1px solid black;
      border-collapse: collapse;
 }

 
 #subtext {
 text-align:center;
 }

  <table>
      <thead>
        <th>Field 1</th>
        <th>Field 2</th>
        <th>Field 3</th>
      </thead>
      <tbody>
        <tr>
          <td>Name1</td>
          <td>Name2</td>
          <td>Name3</td>
        </tr>
        <tr id="subtext">
          <td colspan="3"> Subtext </td>
        </tr>
        <tr>
          <td>Name4</td>
          <td>Name5</td>
          <td>Name6</td>
        </tr>
        <tr id="subtext">
          <td colspan="3"> Subtext </td>
        </tr>
      </tbody>
    </table>

You can use CSS to bold that subtext and row together

edited Jun 29, 2021 at 16:37

answered Jun 29, 2021 at 16:21

anirudh

1,4967 silver badges19 bronze badges

8 Comments

Mario Over a year ago

Yeah this seems a lot more than what I'm looking for ... looking at your code though, how would this come about in the angular framework? The *ngFor would go to the first <tr>, and then? The second <tr> that contains the <td> spanning three columns would require a separate *ngFor and would not end up the way I mean it to. Unless I encapsulate them both inside a <div> ... but that sounds weird.

anirudh Over a year ago

And if this answer helps you kindly mark it as correct for future developers. And do let me know in case of any further queries, I'll be happy to help you :)

Mario Over a year ago

What do you mean by limited to HTML and CSS? I have included in the original question that I was using this in the angular framework? But this is what I'm using to hopefully build upon my final answer as this is really good information.

anirudh Over a year ago

Sorry I guess you didn't tag your question for angular and that created the confusion. Actually honestly I dont have much idea of angular. Sorry for that

Mario Over a year ago

No problem at all! It's not as if your answer is irrelevant.

|

Collectives™ on Stack Overflow

Angular: HTML table with two rows inside each tr element

2 Answers 2

5 Comments

8 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

8 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related