Question 118745 in Html Question posted in
Some basic documentation can be found here.

Html – Create a table with elements in column

I have to create a table whith elements like:

Header1 Header2 Header2
Data1 Data2 Data3

I have headers and data taken from api call.

I have tried something like:

<table class="table">
    <div *ngFor="let element of apiResp">
        <tr>
            <th>{{element.header}}</th>
            <td>{{element.data}}</td>
        </tr>
    </div>
</table>

but the result is:

Header1 Data1

Header2 Data2

Header3 Data3

Tags:

3

Answers


  1. 0

    By default, the <div> are not displayed horizontally but vertically.

    What you are trying to do is probably:

    <table class="table">
    <tr>
       <th *ngFor="let element of apiResp">{{element.header}}</th>
    </tr>
    <tr>
       <td *ngFor="let element of apiResp">{{element.data}}</td>
    </tr>
</table>
    Login or Signup to reply.
  2. 0

    Try this:

    <tr>
   <th>{{element.header}}</th>
</tr>
<tr>
   <th>{{element.data}}</th>
</tr>
    Login or Signup to reply.
  3. 0

    Avoid additional tags inside the table. The table wouldn’t work as expected if there would be other tags then the table tags (such as tr for TableRow, th for TableHead cell and td for TableData cell etc.)

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search