This table content is not responsive due to impossible task of merging this into one object-friendly for phone. You can if you want, remove the dropshadow from the table box. If you don’t want the table to be center, just remove table-center

<div class="table-container table-center">
  <table>
    <thead>
      <tr>
        <th>Material</th>
        <th>Quantity</th>
        <th>Unit price</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Acrylic (Transparent)</td>
        <td class="numeric">25</td>
        <td class="numeric">$2.90</td>
      </tr>
      <tr>
        <td>Plywood (Birch)</td>
        <td class="numeric">50</td>
        <td class="numeric">$1.25</td>
      </tr>
      <tr>
        <td>Laminate (Gold on Blue)</td>
        <td class="numeric">10</td>
        <td class="numeric">$2.35</td>
      </tr>
    </tbody>
  </table>
</div>

Preview

Material Quantity Unit price
Acrylic (Transparent) 25 $2.90
Plywood (Birch) 50 $1.25
Laminate (Gold on Blue) 10 $2.35