Does anyone know how to table with an accordion

Expected behavior I know how there's an example for a table within collapsable mdb accordion tabs, I am just wondering for a table created using mdb table how someone would go about doing the inverse of it from the advanced examples. https://mdbootstrap.com/docs/angular/advanced/accordion/ Every time I try nesting an accordion with a table where the heads of the accordion are the row of the tables with table body, everytime the css freaks out shrinks the table row

Actual behavior Every time I try nesting an accordion with a table, where the heads of the accordion are the row of the tables in table body, the css freaks out shrinks the table row under half the table width and creates a lot of whitespace. I can't find what could be resetting width in inspect element so if anyone has any knowledge of explaining it with tags Resources (screenshots, code snippets etc.)

<div class="form-details">
    <input type="number" class="form-control" placeholder="Job-code" name="jobid" [(ngModel)]="userModel.id">
    <input type="text" class="form-control" placeholder="Title" name="jobtit" [(ngModel)]="userModel.title">
    <input type="date" class="form-control" placeholder="Date" name="date" [(ngModel)]="userModel.date">
    <input type="text" class="form-control" placeholder="Location" name="loc" [(ngModel)]="userModel.loc">
    <select placeholder="Status" name="status" [(ngModel)]="userModel.status">
      <option value="open">Open</option>
      <option value="closed">Closed</option>
    </select>
    <input type="number" class="form-control" placeholder="# of Openings" name="opens" [(ngModel)]="userModel.opens">       
    <select placeholder="Employment Duration" name="duration" [(ngModel)]="userModel.dur">
      <option value="full">Full Time</option>
      <option value="part">Part Time</option>
      <option value="intern">Intern</option>
      <option value="contract">Contracted</option>
    </select>

</div>

<div id="table" class="table-editable">
<span class="table-add float-right mb-3 mr-2">
  <a class="text-success" (click)="add()">
    <mdb-icon fas icon="plus" size="2x"></mdb-icon>
  </a>
</span>
</div>

<table id="tableSortExample" mdbTable class="z-depth-1">

  <!-- this is the head of table -->
  <thead>
    <tr>
      <th *ngFor="let job of jobElements; let i = index" aria-controls="tableSortExample" scope="col" [mdbTableSort]="personList" [sortBy]="jobElements[i]">{{job | titlecase}}

        <mdb-icon fas icon="sort"></mdb-icon>
      </th>
    </tr>
  </thead>
    <!-- table body and main accordion are bound on same line -->
    <mdb-accordion [multiple]="true">   
    <tbody>
        >

      <!-- an accordion item and head is defined as by looping a row of each table -->

      <tr *ngFor="let el of personList | filter : 'name' : searchString; let i = index">

        <mdb-accordion-item>  
        <mdb-accordion-item-head>
        <th scope="row">
          <a class="text-success" (click)="rankup(el.id)">
            <mdb-icon fas icon="fas fa-arrow-up"></mdb-icon>
          </a>
          <a class="text-success" (click)="rankdown(el.id)">
            <mdb-icon fas icon="fas fa-arrow-down"></mdb-icon>
          </a>

          <input type="number" value={{el.id}} (keyup)="changeNumber(el.id, 'id', $event)">
        </th>

        <td>
            <span contenteditable="true" (keydown.enter)="onKeydown($event)" (keyup)="changeValue(el.id, 'name', $event)" >{{el.title}}</span>

        </td>
        <td>
            <span contenteditable="true" (keydown.enter)="onKeydown($event)" (keyup)="changeValue(el.id, 'date', $event)" >{{el.date}}</span>
        </td>
        <td>
            <span contenteditable="true" (keydown.enter)="onKeydown($event)" (keyup)="changeValue(el.id, 'location', $event)" >{{el.location}}</span>
        </td>
        <td>
            <span contenteditable="true" (keydown.enter)="onKeydown($event)" (keyup)="changeValue(el.id, 'status', $event)" >{{el.status}}</span>
        </td>
        <td>
            <span contenteditable="true" (keydown.enter)="onKeydown($event)" (keyup)="changeValue(el.id, 'opens', $event)" >{{el.opens}}</span>
        </td>
        <td>
            <span contenteditable="true" (keydown.enter)="onKeydown($event)" (keyup)="changeValue(el.id, 'duration', $event)" >{{el.duration}}</span>
        </td>


      </mdb-accordion-item-head>
        <mdb-accordion-item-body >
          {{descriptList[i]}}
        </mdb-accordion-item-body>
      </mdb-accordion-item>

      </tr>




    </tbody>
  </mdb-accordion>