Materialize 具体化CSS删除表头间距

我正在做一个简单的演示，在那里我几乎没有员工信息。我正在使用物化css表。但是我在sr.no和其他列名之间获得了额外的空间

这是我的密码：

     <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>

{{tableTitle}}




高级职员
名称
年龄
性别
地址
任命
部门
薪水
{{i+1}}
{{item.Name}
{{item.Age}
{{item.Gender}
{{item.Address}
{{item.Designation}
{{项目.部门}
{{item.Salary}
删除
编辑模式

在

中，您可以设置

width=“30px”

或您喜欢的任何设置。 图标，我会放在一个单元格中，并使用

text align:right

高级职员
名称
年龄
性别
地址
任命
部门
薪水
{{i+1}}
{{item.Name}
{{item.Age}
{{item.Gender}
{{item.Address}
{{item.Designation}
{{项目.部门}
{{item.Salary}
删除
编辑模式

不确定Materialize是否为此提供了特定的功能，但通常您只需设置列标题的CSS

宽度（或在HTML中定义实际列）。