Multiple Data in Same Row In Angular 4

Question

I need help since I need to achieve multiple data in the same row. Is it possible that I could I achieve this? I have made a sample code but the problem the headers for the quantity and cup size isn't properly aligned. Could I an aligned it with just using angular and tables or should I forced to align it with CSS? I need to achieve like this in the picture below.

JSON Response:

{
  "company_name": "Rizul Burmeze Jucies and Foods",
  "reports": [
    {
      "outlet_name": "Outlet 1",
      "outlet_cup_sales": [
        {
          "quantity": 3,
          "cup_name": "Small Plastic Cup"
        },
        {
          "quantity": 5,
          "cup_name": "Regular Plastic Cup"
        }
      ]
    },
    {
      "outlet_name": "Outlet 2",
      "outlet_cup_sales": [
        {
          "quantity": 3,
          "cup_name": "Grande Plastic Cup"
        },
        {
          "quantity": 5,
          "cup_name": "BBZ Plastic Cup"
        }
      ]
    }
  ]
};

Code:

<div class="col-lg-12 table-responsive">
  <table class="table m-0">
    <thead>
      <tr>
        <th>OUTLET</th>
        <th></th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let response of filter_date_response?.reports">
        <td>{{ response?.outlet_name }}</td>
        <td>
          <table class="table m-0 no-border"  width="100%">
            <tbody>
              <tr *ngFor="let res of response?.outlet_cup_sales">
                <td class="no-border"> {{ res?.cup_name }} </td>
                <td class="no-border"> {{ res?.quantity }} </td>
              </tr>
            </tbody>
          </table>
        </td>
      </tr>
    </tbody>
  </table>
</div>

Answer 1

There is no need to use nested tables. You can use rowspan ( w3schools ) to achieve the same result.

<table class="table m-0">
    <thead>
      <tr>
        <th>OUTLET</th>
        <th>Size</th>
        <th>Count</th>
      </tr>
    </thead>
    <tbody>
        <ng-container *ngFor="let response of filter_date_response?.reports">
        <tr *ngFor="let res of response.outlet_cup_sales; let i = index">
          <td *ngIf="i == 0" [attr.rowspan]="response.outlet_cup_sales.length"> 
            {{ response?.outlet_name }} 
          </td>
          <td> {{ res?.cup_name }} </td>
          <td> {{ res?.quantity }} </td>
        </tr>
      </ng-container>
    </tbody>
</table>

You can change column size by changing the header's.

Try it Here

Answer 2

You can do this using the rowspan HTML attribute.

By placing rowspan="2" on the Outlet 1 cell, that means that it should be 2 cells tall.

td {
   border: 1px solid black;
   padding: 5px;
}

<table>

  <tbody>
    <tr>
      <td rowspan="2">Outlet 1</td>
      <td>BBZ</td>
      <td>3</td>
    </tr>
    <tr>
      <td>Regular</td>
      <td>2</td>
    </tr>
    
  </tbody>
</table>