Extra Underline in Material Component(Angular2) - material-design

Question

I am new in Material Component and facing a problem since yesterday. I am using a input text filed for design a signup form but every field take extra underline, I cannot find out the issue please.
<form class="example-form" (ngSubmit)="onSignup(f)" #f="ngForm">
<label class="registr">Registration Form</label>
<table class="example-full-width" cellspacing="0"><tr>
<td><mat-form-field class="example-full-width">
<input matInput id="fname" name="fname" placeholder="First name">
</mat-form-field></td>
<td><mat-form-field class="example-full-width">
<input matInput id="lname" name="lname" placeholder="Last Name">
</mat-form-field></td>
</tr></table>
<table class="example-full-width" cellspacing="0"><tr>
<td><mat-form-field class="example-full-width">
<input type="email" matInput placeholder="Enter your email" id="email" name="email" [formControl]="email" required>
<mat-error *ngIf="email.invalid">{{getErrorMessage()}}</mat-error>
</mat-form-field></td>
<td><mat-form-field class="example-full-width">
<mat-select placeholder="Select Role">
<mat-option *ngFor="let role of roles" [value]="role" value="option" required>{{role}}</mat-option>
</mat-select>
</mat-form-field></td>
</tr></table>
<mat-form-field>
<input type="password" matInput placeholder="Enter your password" id="password" name="password" [type]="hide ? 'password' : 'text'">
<mat-icon matSuffix (click)="hide = !hide">{{hide ? 'visibility' : 'visibility_off'}}</mat-icon>
</mat-form-field>
<button type="button" class="btn btn-info d-none d-lg-block m-l-15" type="submit">Sign Up</button>
</form>