title: Angular 2 table not displaying properly on mobile device
body: <p>I am building a web app using Angular Material/ NgBootstrap/ Bootstrap 4. </p>
  
  <p>I have a table where the user can search for data within a date range and the data is then displayed to the user in a table. </p>
  
  <p>It all works fine in my desktop environment as shown in the following image where 12 sets of data is displayed and I can scroll down </p>
  
  <p><a href="https://i.stack.imgur.com/GJEKs.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/GJEKs.png" alt="desktop"></a></p>
  
  <p>However, for my mobile device, the view gets cut off and I can not see any data from the table </p>
  
  <p><a href="https://i.stack.imgur.com/DXpGR.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/DXpGR.png" alt="mobile"></a></p>
  
  <p>Have anyone experienced something like this where the behaviour on mobile device is off for Angular 2 app or perhaps bootsrap 4 apps?</p>
  
  <p>Below are the code that I am using to display the table</p>
  
  <pre><code>&lt;table *ngIf="myArray.length &gt; 0 &amp;&amp; !isLoading" class="table table-striped table-hover"&gt;
      &lt;thead&gt;
      &lt;tr&gt;
          &lt;th&gt;Name&lt;/th&gt;
          &lt;th&gt;Date&lt;/th&gt;
          &lt;th&gt;Hours&lt;/th&gt;
          &lt;th&gt;Status&lt;/th&gt;
      &lt;/tr&gt;
      &lt;/thead&gt;
  
      &lt;tbody&gt;
      &lt;tr *ngFor="let data of myArray" (click)="onRowClick(pastApproval)"&gt;
          &lt;td&gt;{{data.firstName}} {{data.lastName}}&lt;/td&gt;
          &lt;td&gt;{{data.workDate_epoch}&lt;/td&gt;
          &lt;td&gt;{{data.totalHours}}&lt;/td&gt;
          &lt;td&gt;{{data.status}}&lt;/td&gt;
      &lt;/tr&gt;
      &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>Note. If I use the chrom browser on my phone, it shows one row out of the 12. Kinda different to what shows here which I believe is from safari (opened from facebook link)</p>