Materialise CSS Entfernen Tabellenkopf Abstand

Question

Ich mache eine einfache Demo, wo ich wenige Mitarbeiter Informationen haben. Ich benutze materialize CSS-Tabelle. Aber ich erhalte zusätzlichen Platz zwischen sr.no und anderen Spaltennamen.

hier ist mein 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

im <th> Sie könnten setzen width="30px" oder was auch immer your're bequem mit. Die Symbole, würde ich in eine Zelle gebracht und 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>