PHP Ionic Angular Phonegap AJAX Javascript CSS MySQL jQuery Forum


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

ถาม-ตอบ แนะนำไอเดียว โค้ดตัวอย่าง แนวทาง วิธีแก้ปัญหา สอบถามเรื่องการออกแบบหน้าจอให้พอดีกับ tablet

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


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


โดย:  Pack260836 IP: 118.175.173.xxx วันที่: 28-10-2017 เวลา: 09:37:31

คำแนะนำ และการใช้งาน

สมาชิก กรุณา ล็อกอินเข้าระบบ เพื่อตั้งคำถามใหม่ หรือ ตอบคำถาม สมาชิกใหม่ สมัครสมาชิกได้ที่ สมัครสมาชิก


  • ถาม-ตอบ กรุณา ล็อกอินเข้าระบบ


  • ( หรือ สามารถทำการ สมัครสมาชิก และล็อกอิน ด้วย ปุ่ม Log in with Facebook ด้านล่าง )
 ความคิดเห็นที่ 1
ลองหาสิ่งที่เรียกว่า Responsive ดูครับ เช่น การเขียน Css แบบ Responsive เป็นต้น 


โดย:  Ittithon Promsen IP: 115.87.103.xxx วันที่: 28-10-2017 เวลา: 11:18:24
 ความคิดเห็นที่ 2
ถ้าใช้ 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;
  }
}


โดย:  Ninenik IP: 223.24.62.xxx วันที่: 28-10-2017