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

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

Moderator: mindphp

somzaaa

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

Post by 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

User avatar
mindphp
ผู้ดูแลระบบ MindPHP
ผู้ดูแลระบบ MindPHP
Posts: 25149
Joined: 22/09/2008 6:18 pm
Contact:

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

Post by 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: สอบถามวิธีการทำให้หน้าเว็บปรับขนาดตามจอค่ะ

Post by somzaaa »

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

เคยลองหาวิธีแบ่งหน้าแล้ววงงค่ะ เลยยังไม่ได้แบ่ง ._.

User avatar
mindphp
ผู้ดูแลระบบ MindPHP
ผู้ดูแลระบบ MindPHP
Posts: 25149
Joined: 22/09/2008 6:18 pm
Contact:

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

Post by mindphp »

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

Code: Select all

<!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

somzaaa

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

Post by somzaaa »

ได้แล้วค่ะ ขอบพระคุณมากๆ นะคะ :cry: :cry:

Post Reply

Return to “HTML CSS”

Who is online

Users browsing this forum: No registered users and 7 guests