💄 nicer forecast table

src/app/irrigation/irrigation-forecast-panel.component.html

@@ -2,10 +2,14 @@
   <hs-panel-header name="forecast" [title]="'Irrigation forecast'">
   </hs-panel-header>
   <div class="card-body">
-    <table *ngIf="forecastLoaded; else loading">
-      <tr *ngFor="let day of data.forecast; let i = index">
-        <td>{{data.days[i] | date:'EEEE, MMMM d'}}</td><td>{{day | number:'1.0-0'}}&nbsp;m<sup>3</sup></td>
-      </tr>
+    <table class="table table-bordered table-striped" *ngIf="forecastLoaded; else loading">
+      <tbody>
+        <tr *ngFor="let day of data.forecast; let i = index">
+          <td>{{data.days[i] | date:'EEEE, MMMM d'}}</td>
+          <td>{{day | number:'1.0-0'}}&nbsp;m<sup>3</sup></td>
+        </tr>
+      </tbody>
+      <caption>Amount of water which is predicted to irrigate the reservoir in the upcoming days</caption>
     </table>
     <ng-template #loading>
       <div class="spinner-border spinner mx-2" role="status" aria-hidden="true">

src/app/irrigation/irrigation-forecast-panel.component.scss

@@ -2,6 +2,7 @@
 @import "bootstrap/scss/variables";
 @import "bootstrap/scss/mixins";
 @import "bootstrap/scss/spinners";
+@import "bootstrap/scss/tables";
 
 .spinner {
     width: 3rem;