Tree Table is not responsive in small devices

[nilakshi]

Code: Select all

<p-treeTable [value]="tableData" selectionMode="single" [style]="{'overflow-x': 'scroll'}">
          <ng-template pTemplate="caption">
            <div style="text-align: right">
              <i class="pi pi-search" style="margin:4px 4px 0 0"></i>
              <input type="text" pInputText size="50" placeholder="Search"
                     (input)="tt.filterGlobal($event.target.value, 'contains')" style="width:auto">
            </div>
          </ng-template>
          <ng-template pTemplate="header">
            <tr>
              <th style="text-align: center" rowspan="2" width="20%">MTD as at 31/02/2018</th>
              <th style="text-align: center" colspan="2">Submissions</th>
              <th style="text-align: center" colspan="2">UW In Progress&nbsp;<sup>A</sup></th>
              <th style="text-align: center" colspan="2">Total Cancellations</th>
              <th style="text-align: center" colspan="2">Gross Issued</th>
              <th style="text-align: center" colspan="2">Net Issued</th>
              <th style="text-align: center" rowspan="2">Active LP</th>
              <th style="text-align: center" rowspan="2">FYC&nbsp;<sup>B</sup></th>
            </tr>
            <tr>
              <th style="text-align: right">#Cases</th>
              <th style="text-align: right">ANP</th>
              <th style="text-align: right">#Cases</th>
              <th style="text-align: right">ANP</th>
              <th style="text-align: right">#Cases</th>
              <th style="text-align: right">ANP</th>
              <th style="text-align: right">#Cases</th>
              <th style="text-align: right">ANP</th>
              <th style="text-align: right">#Cases</th>
              <th style="text-align: right">ANP</th>
            </tr>
          </ng-template>
          <ng-template pTemplate="body" let-rowNode let-rowData="rowData" [ngClass]="'text-right'">
            <tr [ngClass]="{'total-row':rowData.mtd== 'Total'}">
              <td>
                <p-treeTableToggler [rowNode]="rowNode"></p-treeTableToggler>
                {{rowData.mtd}}
              </td>
              <td style="text-align: right" data-toggle="modal">{{ rowData.subCases }}</td>
              <td style="text-align: right" data-toggle="modal">{{ rowData.subANP }}</td>
              <td style="text-align: right" data-toggle="modal">{{ rowData.uwInProCases }}</td>
              <td style="text-align: right" data-toggle="modal">{{ rowData.uwInProANP }}</td>
              <td style="text-align: right" data-toggle="modal">{{ rowData.totCancellationCases }}</td>
              <td style="text-align: right" data-toggle="modal">{{ rowData.totCancellationANP }}</td>
              <td style="text-align: right" data-toggle="modal">{{ rowData.grossIssCases }}</td>
              <td style="text-align: right" data-toggle="modal">{{ rowData.grossIssANP }}</td>
              <td style="text-align: right" data-toggle="modal">{{ rowData.netIssCases }}</td>
              <td style="text-align: right" data-toggle="modal">{{ rowData.netIssANP }}</td>
              <td style="text-align: right" data-toggle="modal">{{ rowData.activeLP }}</td>
              <td style="text-align: right" data-toggle="modal">{{ rowData.fyc }}</td>
            </tr>
          </ng-template>
        </p-treeTable>

Please help