สอบถามวิธีการทำให้หน้าเว็บปรับขนาดตามจอค่ะ

HTML Basic
สำหรับนักพัฒนาเว็บไซต์มือใหม่ HTML , CSS และการใช้ Tools ต่างๆ ในการพัฒนาเว็บไซต์

Moderator: mindphp

somzaaa

สอบถามวิธีการทำให้หน้าเว็บปรับขนาดตามจอค่ะ

โพสต์ที่ยังไม่ได้อ่าน โดย somzaaa »

สวัสดีค่ะ

คือตอนนี้หน้าเว็บมีปัญหาเรื่องเวลาย่อขนาดบราวเซอร์ ตารางขาดไปค่ะ แบบไม่มี Scroll ให้เลื่อนซ้ายขวาด้วย
ลองมาหลายโค้ดแล้วค่ะ ทั้งใส่ tag <meta> ใส่ body {width:100%} หรือ scroll {overflow-x: scroll;} ก็ไม่ได้ผลเลยค่ะ :cry: :cry:

ไฟล์ดังกล่าวเซฟเป็น php ใช้ css ของ bootstrap เป็นตัวช่วยค่ะ (เหมือนปัญหาจะอยู่ที่โค้ด css แต่หาต้นตอไม่เจอค่ะว่าตรงไหนของโค้ด
(โค้ดยาวมากกกกกกกกกกกกค่ะ)

อันนี้คือเว็บไซต์ของเราค่ะ TT

http://lapatsasom.epizy.com/admin_booklist.php#

อยากขอคำแนะนำจากพี่ๆ ว่าควรทำอย่างไรดี TT
ภาพประจำตัวสมาชิก
mindphp
ผู้ดูแลระบบ MindPHP
ผู้ดูแลระบบ MindPHP
โพสต์: 41117
ลงทะเบียนเมื่อ: 22/09/2008 6:18 pm
ติดต่อ:

Re: สอบถามวิธีการทำให้หน้าเว็บปรับขนาดตามจอค่ะ

โพสต์ที่ยังไม่ได้อ่าน โดย mindphp »

ต้องการให้ย่อตามหน้าจอ หรือ ให้มี Scroll ซ้ายขวาครับ

ตัวอย่างที่ลงมา ทำแบ่งหน้า หน่อยไหมครับ ส่วน php สงสาร Server
ติดตาม VDO: http://www.youtube.com/c/MindphpVideoman
ติดตาม FB: https://www.facebook.com/pages/MindphpC ... 9517401606
หมวดแชร์ความรู้: https://www.mindphp.com/forums/viewforum.php?f=29
รับอบรม และพัฒนาระบบ: https://www.mindphp.com/forums/viewtopic.php?f=6&t=2042
somzaaa

Re: สอบถามวิธีการทำให้หน้าเว็บปรับขนาดตามจอค่ะ

โพสต์ที่ยังไม่ได้อ่าน โดย somzaaa »

แบบใดก็ได้เลยค่ะ

เคยลองหาวิธีแบ่งหน้าแล้ววงงค่ะ เลยยังไม่ได้แบ่ง ._.
ภาพประจำตัวสมาชิก
mindphp
ผู้ดูแลระบบ MindPHP
ผู้ดูแลระบบ MindPHP
โพสต์: 41117
ลงทะเบียนเมื่อ: 22/09/2008 6:18 pm
ติดต่อ:

Re: สอบถามวิธีการทำให้หน้าเว็บปรับขนาดตามจอค่ะ

โพสต์ที่ยังไม่ได้อ่าน โดย mindphp »

แบบ scroll ลองดูตามนี้ครับ

โค้ด: เลือกทั้งหมด

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Table</h2>
  <p>The .table-responsive class creates a responsive table which will scroll horizontally on small devices (under 768px). When viewing on anything larger than 768px wide, there is no difference:</p>                                                                                      
  <div class="table-responsive">          
  <table class="table">
    <thead>
      <tr>
        <th>#</th>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Age</th>
        <th>City</th>
        <th>Country</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>Anna</td>
        <td>Pitt</td>
        <td>35</td>
        <td>New Yorddddddddddddddddddddddddd ffffffffffffffffffff ddddddddddddddddddddddd wwwwwwwwwwwwwwwwwwww wwwwwwwwwwwwwwwk</td>
        <td>USA</td>
      </tr>
    </tbody>
  </table>
  </div>
</div>

</body>
</html>
ที่มาจาก w3schools
ติดตาม VDO: http://www.youtube.com/c/MindphpVideoman
ติดตาม FB: https://www.facebook.com/pages/MindphpC ... 9517401606
หมวดแชร์ความรู้: https://www.mindphp.com/forums/viewforum.php?f=29
รับอบรม และพัฒนาระบบ: https://www.mindphp.com/forums/viewtopic.php?f=6&t=2042
ตอบกลับโพส
  • Similar Topics
    ตอบกลับ
    แสดง
    โพสต์ล่าสุด

ผู้ใช้งานขณะนี้

สมาชิกกำลังดูบอร์ดนี้: ไม่มีสมาชิกใหม่ และบุคลทั่วไป 40