CODEWITHSUNDEEP
htmlcssangularhtml-table
Mario
Mario

Reputation: 369

Angular: HTML table with two rows inside each tr element

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

Upvotes: 1

Views: 2707

Answers (2)

anirudh
anirudh

Reputation: 1466

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

Upvotes: 1

Suryansh Singh
Suryansh Singh

Reputation: 1173

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>

Upvotes: 1

Related Questions