P-table hides header and footer in mobile view.

[ashishp]

<p-table #dt exportFilename="AccountCurrentBalanceReport" [columns]="cols" [value]="accountCurrentBalanceReportList" selectionMode="single"
dataKey="account_id" [paginator]="true" [rows]="10" [responsive]="true" [resizableColumns]="true">
<ng-template pTemplate="caption">
Account Current Balance Table
</ng-template>
<ng-template pTemplate="header" let-columns>
<tr>
<th *ngFor="let col of columns" [pSortableColumn]="col.field" pResizableColumn>
{{col.header}}
<p-sortIcon [field]="col.field"></p-sortIcon>
</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-rowData let-columns="columns">
<tr [pSelectableRow]="rowData">
<td *ngFor="let col of columns;let i=index" class="ui-resizable-column">
<span *ngIf="i>2">
{{rowData[col.field]| number:'1.1-2'}}
</span>
<span *ngIf="i<3">
{{rowData[col.field] }}
</span>
</td>
</tr>
</ng-template>
<ng-template pTemplate="footer" class="ui-table-tfoot" let-columns>
<tr *ngIf="showSummary">
<td style="background-color: #90a4ae;color:white" *ngFor="let col of cols;let i=index">
<span *ngIf="i>2">
{{summary[col.field]| number:'1.1-2'}}
</span>
<span *ngIf="i<3">
{{summary[col.field] }}
</span>
</td>
</tr>
</ng-template>
</p-table>

It works ok in website.
But in mobile it discards(means hides) header and footer section.

I want footer to show the total of the column.
Please give us modified css changes.

I am using serenity theme.