Page 1 of 1

class table-responsive สามารถเลือนดูตารางที่มีข้อมูลยาว ๆ ในจอเล็ก

Posted: 10/08/2019 5:07 pm
by jamepiyawat
สำหรับใครนักพัฒนาเว็บไซต์มือใหม่เหมือนกับผมก็คงจะเคยทำตารางที่ดึงขอมูลออกมายาว ๆ จะเกินหน้าจอกันมาบ้างแหละจะให้ผู้ใช้จะต้องเลือนจอออกไปด้านข้างทั้งข้อมูลที่จัดเอาไว้สวย ๆ ทั้งหน้าก็ต้องถูกเลื่อนไปตามตาราองอีกด้วยทั้งยังสร้างความรำคานให้กับผู้ใช้เว็บไซต์อีกด้วยวันนี้ผมก็มี class ของ bootstrap ที่จะใช้ให้ตารางข้อมูลของเราเลื่อนได้แต่หน้าเว็บทั้งหน้าไม่เลื่อนมาฝากกันจะเป็นอย่างไรลองไปดูกันเลย

ปัญหาที่ตารางข้อมูลยาวเกินไปก็จะเป็นแบบนี้
Selection_999(401).png
Selection_999(401).png (9.75 KiB) Viewed 478 times
พอเราเลื่อนจอหน้าเว็บของเราก็จะเลื่อนไปด้วย
Selection_999(402).png
Selection_999(402).png (7.02 KiB) Viewed 478 times
วิธีการแก้ก็คือใส่คลาส table-responsive คลอบลงไปก่อนสร้างตารางเลย

Code: Select all

  <div class="text-center">
    <h2>ตารางแสดงข้อมูลต่าง ๆ </h2>
  </div>
  <div class="table-responsive">
  <table border="1">
    <tr>
      <th>คอลัมน์ที่ 1</th>
      <th>คอลัมน์ที่ 2</th>
      <th>คอลัมน์ที่ 3</th>
      <th>คอลัมน์ที่ 4</th>
      <th>คอลัมน์ที่ 5</th>
      <th>คอลัมน์ที่ 6</th>
      <th>คอลัมน์ที่ 7</th>
      <th>คอลัมน์ที่ 8</th>
    </tr>
    <tr >
      <td>sadfasfdasfdasdfa</td>
      <td>sadfasfdasfdasdfa</td>
      <td>sadfasfdasfdasdfa</td>
      <td>sadfasfdasfdasdfa</td>
      <td>sadfasfdasfdasdfa</td>
      <td>sadfasfdasfdasdfa</td>
      <td>sadfasfdasfdasdfa</td>
      <td>sadfasfdasfdasdfa</td>
    </tr>
  </table>
</div>
ผลลัธพ์ที่ได้

เราสามารถเลื่อนดูขอมูลในตารางที่ด้านล่างของตารางได้เลย
Selection_999(403).png
Selection_999(403).png (10.96 KiB) Viewed 478 times
หน้าเว็บของเราก็ไม่ได้เลื่อนตามตารางขอมูลด้วย
Selection_999(404).png
Selection_999(404).png (9.86 KiB) Viewed 478 times
เป็นอย่างไรกันบ้างล่ะครับสำหรับ class="table-responsive" ของ bootstrap เป็นไรที่ดีมาก ๆ เลยนะครับก็อย่าลืมนำ class นี้ไปใช้กันนะครับก่อนจะใช้ก็อย่าลืมติดตั้ง bootstrap เอาไว้ก่อนนะครับเดียวจะใช้ class นี้ไม่ได้ก็หวังว่าบทความนี้จะเป็นประโยชน์ให้กับผู้ที่เข้ามาอ่านกันไม่มากก็น้อยนะครับ