checkbox style

src/app/components/toc/layer-checkbox/layer-checkbox.component.html

+    <table>
+      <tr>
+        <td>
+          <div class="form-check form-switch">
+            <input class="form-check-input" type="checkbox" value="" id="flexCheck" [checked]="checked" (click)="onClick()" />
+          </div>
+        </td>
+        <td>
+            <label class="example-value-label">Transparence :{{value}}</label>
+            <mat-slider (input)="onInputChange($event)"
+              class="example-margin"
+              [disabled]="disabled"
+              [invert]="invert"
+              [max]="max"
+              [min]="min"
+              [step]="step"
+              [thumbLabel]="thumbLabel"
+              [tickInterval]="getSliderTickInterval()"
+              [(ngModel)]="value"
+              [vertical]="vertical"
+              aria-labelledby="example-name-label">
+            </mat-slider>   
+        </td>
+      </tr>
+    </table>
 
-    <input class="form-check-input" type="checkbox" value="" id="flexCheck" [checked]="checked" (click)="onClick()" />
-    &nbsp; &nbsp;
-    <label>Transparence :</label> 
-    <label class="example-value-label">{{value}}</label>
-    <mat-slider
-      (input)="onInputChange($event)"
-      class="example-margin"
-      [disabled]="disabled"
-      [invert]="invert"
-      [max]="max"
-      [min]="min"
-      [step]="step"
-      [thumbLabel]="thumbLabel"
-      [tickInterval]="getSliderTickInterval()"
-      [(ngModel)]="value"
-      [vertical]="vertical"
-      aria-labelledby="example-name-label"
-    >