I am currently working on creating a table in Angular 2 with 4 columns. However, I have encountered an issue where unwanted white space appears to the right of the last column. Bootstrap is being utilized as well.
Below is the HTML code snippet:
<div class="panel panel-default">
<div class="panel-heading">User information</div>
<div class = 'data-table'>
<table style="width:60px" class="text-center" header-class="'text-center'" class="table table-bordered" [mfData]="data" #mf="mfDataTable" [mfRowsOnPage]="10">
<thead>
<tr>
<th style="width: 10%"></th>
<th style="width: 10%">
<mfDefaultSorter by="name">Name</mfDefaultSorter>
</th>
<th style="width: 10%">
<mfDefaultSorter by="email">Email</mfDefaultSorter>
</th>
<th style="width: 10%">
<mfDefaultSorter by="age">Age</mfDefaultSorter>
</th>
<th style="width: 10%">
<mfDefaultSorter by="city">City</mfDefaultSorter>
</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let item of mf.data">
<td>
<button class="btn btn-danger" title="remove">
<span class="glyphicon glyphicon-remove"></span>
</button>
</td>
<td>"AJ"</td>
<td>"AJ"</td>
<td class="text-right">"AJ"</td>
<td>"AJ"</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3">
<mfBootstrapPaginator [rowsOnPageSet]="[5,10,15]"></mfBootstrapPaginator>
</td>
</tr>
</tfoot>
</table>
</div>
</div>
You can view the screenshot of the page here: https://i.sstatic.net/hH8AT.png
In the screenshot, I have highlighted the white space to the right and a small column-like space at the bottom in yellow. How can I remove these to achieve a proper table layout?