fix: use a table caption as no-content placeholder

npm/ng-packs/packages/theme-shared/src/lib/components/table/table.component.html

@@ -62,22 +62,20 @@
 </ng-template>
 
 <ng-template #body>
-  <tbody class="ui-table-tbody">
+  <tbody class="ui-table-tbody" *ngIf="value && value.length; else emptyTemplate">
-    <ng-container *ngIf="value && value.length; else emptyTemplate">
+    <ng-template
-      <ng-template
+      #bodyTemplateWrapper
-        #bodyTemplateWrapper
+      *ngFor="let val of slicedValue; let index = index; trackBy: trackByFn"
-        *ngFor="let val of slicedValue; let index = index; trackBy: trackByFn"
+      [ngTemplateOutlet]="bodyTemplate"
-        [ngTemplateOutlet]="bodyTemplate"
+      [ngTemplateOutletContext]="{ $implicit: val, rowIndex: index }"
-        [ngTemplateOutletContext]="{ $implicit: val, rowIndex: index }"
+    ></ng-template>
-      ></ng-template>
-    </ng-container>
   </tbody>
 </ng-template>
 
 <ng-template #emptyTemplate>
-  <tr class="empty-row" #emptyRow>
+  <caption class="ui-table-empty">
-    <div class="empty-row-content" [style.width.px]="emptyRow.offsetWidth">
+    {{
-      {{ emptyMessage | abpLocalization }}
+      emptyMessage | abpLocalization
-    </div>
+    }}
-  </tr>
+  </caption>
 </ng-template>

npm/ng-packs/packages/theme-shared/src/lib/components/table/table.component.scss

@@ -6,13 +6,11 @@
     filter: brightness(90%);
   }
 
-  .ui-table-tbody > tr.empty-row:hover {
+  .ui-table-empty {
-    filter: none;
+    padding: 20px 0;
-  }
-
-  .ui-table-tbody > tr.empty-row > div.empty-row-content {
-    padding: 10px;
     text-align: center;
+    border: 1px solid #e0e0e0;
+    border-top-width: 0;
   }
 
   .ui-table-caption,