table width 100

Client/src/app/components/contributor-yearly-report/contributor-yearly-report.component.css

@@ -14,6 +14,10 @@
       height: 300px;
   }
 
+  .w-100 {
+      width: 100%;
+  }
+
   .d-block {
       display: block;
   }
@@ -50,6 +54,10 @@
       text-align: right;
   }
 
+  .text-left {
+      text-align: left;
+  }
+
   .mt-20 {
       margin-top: 20px;
   }
@@ -75,11 +83,11 @@
       -webkit-print-color-adjust: exact;
   }
 
-  table {
+  table.borders {
     border-collapse: collapse;
   }
   
-  table, th, td {
+  table.borders, table.borders th, table.borders td {
     border: 1px solid black;
   }
 

Client/src/app/components/contributor-yearly-report/contributor-yearly-report.component.html

@@ -31,7 +31,7 @@
       <p><b>Registration Code: </b>{{registrationCode}}</p>
     </div>
     <div class="mt-20">
-      <table class="cell-padding-5">
+      <table class="cell-padding-5 borders">
         <thead>
           <tr>
             <th colspan="2">{{taxYear}} Giving Summary</th>
@@ -62,15 +62,25 @@
   </div>
 </div>
 
-<table class="page-break-before cell-padding-5">
+<table class="page-break-before cell-padding-5 w-100 borders">
   <thead>
     <tr>
-      <th>Date</th>
+      <th class="text-left">Date</th>
+      <th nowrap class="text-left">Payment Type</th>
+      <th nowrap class="text-left">Check Number</th>
+      <th class="text-left">Fund</th>
+      <th class="text-left">Description</th>
+      <th class="text-left">Amount</th>
     </tr>
   </thead>
   <tbody>
     <tr *ngFor="let t of transactions">
-      <td>{{t.date}}</td>
+      <td nowrap>{{t.date}}</td>
+      <td nowrap>{{t.type === 0 ? 'Cash' : 'Check'}}</td>
+      <td nowrap>{{t.checkNumber}}</td>
+      <td nowrap>{{t.fund === 0 ? 'General' : 'Missions'}}</td>
+      <td width="99%">{{t.description}}</td>
+      <td nowrap>{{t.amount | currency}}</td>
     </tr>
   </tbody>
 </table>