Improve table layout

src/app/pages/tables/bikes/bikes.component.html

@@ -1,8 +1,9 @@
-<div class="table-control">
+<div class="table-page-wrapper">
+  <div class="table-control">
     <button mat-raised-button color="primary">Primary</button>
     <button mat-raised-button color="accent">Accent</button>
-</div>
+  </div>
-<div id="table-container">
+  <div class="table-container">
     <table
       mat-table
       [dataSource]="bikes"
@@ -35,7 +36,7 @@
       </ng-container>
 
       <!-- Name Column -->
-    <ng-container matColumnDef="name">
+      <ng-container matColumnDef="name" sticky>
         <th mat-header-cell *matHeaderCellDef>Name</th>
         <td
           mat-cell
@@ -67,14 +68,23 @@
       <!-- NumberOfChildren Column -->
       <ng-container matColumnDef="numberOfChildren">
         <th mat-header-cell cdkDrag *matHeaderCellDef>Anzahl Kinder</th>
-      <td mat-cell *matCellDef="let element">{{ element.numberOfChildren }}</td>
+        <td mat-cell *matCellDef="let element">
+          {{ element.numberOfChildren }}
+        </td>
       </ng-container>
 
       <!-- Buttons Column -->
       <ng-container matColumnDef="buttons" stickyEnd>
         <th mat-header-cell *matHeaderCellDef></th>
         <td mat-cell *matCellDef="let element">
-        <mat-icon>more_vert</mat-icon>
+          <div class="button-wrapper">
+            <button mat-icon-button>
+              <mat-icon>edit</mat-icon>
+            </button>
+            <button mat-icon-button>
+              <mat-icon>delete</mat-icon>
+            </button>
+          </div>
         </td>
       </ng-container>
 
@@ -82,4 +92,5 @@
       <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
       <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
     </table>
+  </div>
 </div>

src/app/pages/tables/bikes/bikes.component.scss

@@ -1,24 +1,29 @@
-.table-control {
+.table-page-wrapper {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  .table-control {
     margin: 0.5em;
-}
+    flex: none;
-#table-container {
+  }
+  .table-container {
+    flex: 1;
     width: 100%;
     max-width: 100%;
     overflow: auto;
     table {
       width: 100%;
-    th.mat-column-name,
+      .mat-header-cell,
-    td.mat-column-name {
+      .mat-footer-cell,
-      padding-left: 8px;
+      .mat-cell {
+        min-width: 80px;
+        box-sizing: border-box;
       }
 
-    .mat-table-sticky:first-child {
+      .button-wrapper {
-      border-right: 1px solid #ffffff1f;
+        display: flex;
-      padding-right: 1em;
+        flex-direction: row;
       }
-
-    .mat-table-sticky:last-child {
-      border-left: 1px solid #ffffff1f;
     }
   }
 }