实现CSS删除表头间距

Question

我做了一个简单的演示，我的员工信息很少。我正在使用materialize 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>

Answer 1

在<th>中，您可以设置width="30px"或其他任何您喜欢的内容。 我将图标放在一个单元格中，并使用text-align: right

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;