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

score 1 · Answer 1 · answered Jun 29 '21 at 16:16

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 '21 at 16:16

Suryansh Singh

1,123
7
15

there's no need you add `` so many times. It can be misleading when accessing in CSS as a table should have only one `` ideally – anirudh Jun 29 '21 at 16:26
@anirudh Different Table inside table row , and different table having different table head. That was my reasoning. User can change according to his needs. – Suryansh Singh Jun 29 '21 at 16:32
This seems a bit redundant. Check out my answer once – anirudh Jun 29 '21 at 16:35
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. – Mario Jun 30 '21 at 07:57
@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: https://stackoverflow.com/a/3109087/15387341 – Suryansh Singh Jun 30 '21 at 11:44

anirudh · Answer 2 · 2021-06-29T16:37:56.717

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 '21 at 16:37

answered Jun 29 '21 at 16:21

anirudh

1,436
5
18

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 ``, and then? The second `` that contains the `` 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 `
` ... but that sounds weird.
– Mario Jun 30 '21 at 07:43
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 :) – anirudh Jun 30 '21 at 07:56
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. – Mario Jun 30 '21 at 07:56
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 – anirudh Jun 30 '21 at 07:57
No problem at all! It's not as if your answer is irrelevant. – Mario Jun 30 '21 at 07:58
Thanks , I'll make sure from next time to read the tech stack before answering. Haha – anirudh Jun 30 '21 at 07:59
Thanks for editing the tags , But I guess you can now convert it to angular based on this answer – anirudh Jun 30 '21 at 08:01
Encapsulating them in
might be an option though.
– anirudh Jun 30 '21 at 08:03

Angular: HTML table with two rows inside each tr element

2 Answers2