How to cover full screen for table having 5 columns

Summary

How to cover full screen for table having 5 columns

Content

Hi All,

How to cover full screen for table having 5 columns. 

Code Snippet

<div class="oj-flex">
  <div class="oj-panel oj-flex-items-pad oj-flex-item oj-sm-12 oj-md-12 boxshadow roundbox"
    id="div--1199153212-1">
    <div class="dashboardheadings">Recent Purchases</div>
    <div>
      <oj-table scroll-policy="loadMoreOnScroll" id="oj-table--1199153212-1" class="oj-flex-item oj-sm-12 oj-md-4 oj-table-data-cell-padding"
        selection-mode.row="none" selection-mode.column="none" columns='[{"headerText":"Id","field":"id"},{"headerText":"Product Name","field":"productName"},{"headerText":"Delivery Status","field":"deliveryStatus"},{"headerText":"Date of Order","field":"dateOfOrder"},{"headerText":"Date of Delivery","field":"dateOfDelivery"}]'
        data="[[$page.variables.order1ListSDP]]" display="grid" style='style="width: 100%;'></oj-table>
    </div>

  </div>
</div>