สอบถามเรื่องการออกแบบหน้าจอให้พอดีกับ tablet

ซึ่งเปิดใน pc ปกติแต่พอเปิดใน Tablet  Table แถว Barcode ล้นออกกรอบเลยอยากขอคำแนะนำในการออกแบบให้พอดีกับหน้าจอ Tablet หน่อยครับ ขอบคุณครับ

ลองหาสิ่งที่เรียกว่า Responsive ดูครับ เช่น การเขียน Css แบบ Responsive เป็นต้น 

ถ้าใช้ bootstrap อองใช้แบบนี้ดู

<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

จะสามารถคงรูปแบบตาราง โดยเลื่อนข้อมูลในแนวนอนได้

>>>  อัพเดท >>> 28-10-2017
------------------------------------------
หรือถ้าไม่ได้ใช้ bootstrap ทั้งหมดแต่แรก ลองเอา css style ของ bootstrap ในส่วนของ table-response ไปใช้ ก็ได้

.table-responsive {
  min-height: .01%;
  overflow-x: auto;
}
@media screen and (max-width: 767px) {
  .table-responsive {
    width: 100%;
    margin-bottom: 15px;
    overflow-y: hidden;
    -ms-overflow-style: -ms-autohiding-scrollbar;
    border: 1px solid #ddd;
  }
  .table-responsive > .table {
    margin-bottom: 0;
  }
  .table-responsive > .table > thead > tr > th,
  .table-responsive > .table > tbody > tr > th,
  .table-responsive > .table > tfoot > tr > th,
  .table-responsive > .table > thead > tr > td,
  .table-responsive > .table > tbody > tr > td,
  .table-responsive > .table > tfoot > tr > td {
    white-space: nowrap;
  }
  .table-responsive > .table-bordered {
    border: 0;
  }
  .table-responsive > .table-bordered > thead > tr > th:first-child,
  .table-responsive > .table-bordered > tbody > tr > th:first-child,
  .table-responsive > .table-bordered > tfoot > tr > th:first-child,
  .table-responsive > .table-bordered > thead > tr > td:first-child,
  .table-responsive > .table-bordered > tbody > tr > td:first-child,
  .table-responsive > .table-bordered > tfoot > tr > td:first-child {
    border-left: 0;
  }
  .table-responsive > .table-bordered > thead > tr > th:last-child,
  .table-responsive > .table-bordered > tbody > tr > th:last-child,
  .table-responsive > .table-bordered > tfoot > tr > th:last-child,
  .table-responsive > .table-bordered > thead > tr > td:last-child,
  .table-responsive > .table-bordered > tbody > tr > td:last-child,
  .table-responsive > .table-bordered > tfoot > tr > td:last-child {
    border-right: 0;
  }
  .table-responsive > .table-bordered > tbody > tr:last-child > th,
  .table-responsive > .table-bordered > tfoot > tr:last-child > th,
  .table-responsive > .table-bordered > tbody > tr:last-child > td,
  .table-responsive > .table-bordered > tfoot > tr:last-child > td {
    border-bottom: 0;
  }
}