Materialize CSS Remove table head spacing - materialize

Question

I making a simple demo where i have few employees information. I am using materialize css table. But i am getting extra space between sr.no and other column names.
here is my code :
<br/>
<div class="row">
<div class="col l8">
<div class="card darken-2">
<div class="card-content">
<span class="card-title">{{tableTitle}}</span>
<br/>
<div class="row">
<div class="input-field col s4">
<input id="empSearch" type="text" placeholder="Search">
</div>
</div>
<br/>
<div class="row">
<div class="col lg7">
<table class="bordered highlight responsive-table">
<thead>
<tr>
<th>Sr.no</th>
<th>Name</th>
<th>Age</th>
<th>Gender</th>
<th>Address</th>
<th>Designation</th>
<th>Department</th>
<th>Salary</th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr *ngFor="let item of EmployeeData;let i= index">
<td>{{i+1}}</td>
<td>{{item.Name}}</td>
<td>{{item.Age}}</td>
<td>{{item.Gender}}</td>
<td>{{item.Address}}</td>
<td>{{item.Designation}}</td>
<td>{{item.Department}}</td>
<td>{{item.Salary}}</td>
<td>
<i class="material-icons">delete</i>
</td>
<td>
<i class="material-icons">mode_edit</i>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>

Answer 1

in the <th> you could set width="30px" or whatever your're comfortable with.
The icons, I'd put in one cell, and use text-align: right
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.1/css/materialize.min.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<table>
<thead>
<tr>
<th width="30px">Sr.no</th>
<th>Name</th>
<th>Age</th>
<th>Gender</th>
<th>Address</th>
<th>Designation</th>
<th>Department</th>
<th>Salary</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>{{i+1}}</td>
<td>{{item.Name}}</td>
<td>{{item.Age}}</td>
<td>{{item.Gender}}</td>
<td>{{item.Address}}</td>
<td>{{item.Designation}}</td>
<td>{{item.Department}}</td>
<td>{{item.Salary}}</td>
<td style="text-align: right">
<i class="material-icons">delete</i>
<i class="material-icons">mode_edit</i>
</td>
</tr>
</tbody>
</table>