Add tbody

bassages · Apr 10, 2022 · 11ac1ec · 11ac1ec
1 parent 6778860
commit 11ac1ec
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 25 deletions.
diff --git a/src/app/energie-verbruik/energie-verbruik.component.html b/src/app/energie-verbruik/energie-verbruik.component.html
@@ -114,12 +114,14 @@
             <th class="text-end" *ngIf="isEnergieSoortSelected('stroom') && isEnergieSoortSelected('gas') && verbruiksoort === 'kosten'">Totaal</th>
           </tr>
         </thead>
-        <tr *ngFor="let verbruik of verbruiken" class="clickable" (click)="navigateToDetailsOfVerbruik(verbruik)">
-          <td class="text-end">{{ getFormattedDate(verbruik) }}</td>
-          <td class="text-end" *ngIf="isEnergieSoortSelected('gas')">{{ getFormattedValue(verbruik, 'gas') }}</td>
-          <td class="text-end" *ngIf="isEnergieSoortSelected('stroom')">{{ getFormattedValue(verbruik, 'stroom') }}</td>
-          <td class="text-end" *ngIf="isEnergieSoortSelected('stroom') && isEnergieSoortSelected('gas') && verbruiksoort === 'kosten'">{{ getFormattedTotalCosts(verbruik) }}</td>
-        </tr>
+        <tbody>
+          <tr *ngFor="let verbruik of verbruiken" class="clickable" (click)="navigateToDetailsOfVerbruik(verbruik)">
+            <td class="text-end">{{ getFormattedDate(verbruik) }}</td>
+            <td class="text-end" *ngIf="isEnergieSoortSelected('gas')">{{ getFormattedValue(verbruik, 'gas') }}</td>
+            <td class="text-end" *ngIf="isEnergieSoortSelected('stroom')">{{ getFormattedValue(verbruik, 'stroom') }}</td>
+            <td class="text-end" *ngIf="isEnergieSoortSelected('stroom') && isEnergieSoortSelected('gas') && verbruiksoort === 'kosten'">{{ getFormattedTotalCosts(verbruik) }}</td>
+          </tr>
+        </tbody>
       </table>
     </div>
   </div>

diff --git a/src/app/klimaat/klimaat-historie/klimaat-historie.component.html b/src/app/klimaat/klimaat-historie/klimaat-historie.component.html
@@ -57,12 +57,14 @@
   <div class="col-md-12 col-lg-11 px-2 px-sm-0">
     <div [hidden]="!showChart" id="chart" class="c3 graph-chart"></div>
     <div *ngIf="showTable" class="table-responsive">
-      <table class="table table-bordered table-striped table-hover table-sm">
-        <tr *ngFor="let klimaat of klimaats" class="clickable'">
-          <td class="text-end">{{ getFormattedTime(klimaat) }}</td>
-          <td class="text-end">{{ formatWithUnitLabel(sensorType, klimaat[sensorType]) }}</td>
-          <td [style.background-color]="getColor(klimaat[sensorType])" style="width:12px;"></td>
-        </tr>
+      <table class="table table-bordered table-striped table-sm">
+        <tbody>
+          <tr *ngFor="let klimaat of klimaats" class="clickable'">
+            <td class="text-end">{{ getFormattedTime(klimaat) }}</td>
+            <td class="text-end">{{ formatWithUnitLabel(sensorType, klimaat[sensorType]) }}</td>
+            <td [style.background-color]="getColor(klimaat[sensorType])" style="width:12px;"></td>
+          </tr>
+        </tbody>
       </table>
     </div>
   </div>

diff --git a/src/app/meterstand/meterstand.component.html b/src/app/meterstand/meterstand.component.html
@@ -11,21 +11,21 @@
 <div class="table-responsive">
   <table class="table table-bordered table-striped table-sm">
     <thead>
-    <tr>
-      <th colspan="2" style="width: 25%">Datum</th>
-      <th class="text-end" style="width: 25%">Stroom daltarief</th>
-      <th class="text-end" style="width: 25%">Stroom normaaltarief</th>
-      <th class="text-end" style="width: 25%">Gas</th>
-    </tr>
+      <tr>
+        <th colspan="2" style="width: 25%">Datum</th>
+        <th class="text-end" style="width: 25%">Stroom daltarief</th>
+        <th class="text-end" style="width: 25%">Stroom normaaltarief</th>
+        <th class="text-end" style="width: 25%">Gas</th>
+      </tr>
     </thead>
     <tbody>
-    <tr *ngFor="let meterstandOpDag of sortedMeterstandenPerDag">
-      <td class="text-end">{{meterstandOpDag.dag | date : 'EEE.'}}</td>
-      <td class="text-nowrap">{{meterstandOpDag.dag | date : 'dd-MM-yyyy'}}</td>
-      <td class="text-end">{{meterstandOpDag.meterstand?.stroomTarief1 | number: '1.3-3'}}</td>
-      <td class="text-end">{{meterstandOpDag.meterstand?.stroomTarief2 | number: '1.3-3'}}</td>
-      <td class="text-end">{{meterstandOpDag.meterstand?.gas | number: '1.3-3'}}</td>
-    </tr>
+      <tr *ngFor="let meterstandOpDag of sortedMeterstandenPerDag">
+        <td class="text-end">{{meterstandOpDag.dag | date : 'EEE.'}}</td>
+        <td class="text-nowrap">{{meterstandOpDag.dag | date : 'dd-MM-yyyy'}}</td>
+        <td class="text-end">{{meterstandOpDag.meterstand?.stroomTarief1 | number: '1.3-3'}}</td>
+        <td class="text-end">{{meterstandOpDag.meterstand?.stroomTarief2 | number: '1.3-3'}}</td>
+        <td class="text-end">{{meterstandOpDag.meterstand?.gas | number: '1.3-3'}}</td>
+      </tr>
     </tbody>
   </table>
 </div>