ปัญหาที่ตารางข้อมูลยาวเกินไปก็จะเป็นแบบนี้
พอเราเลื่อนจอหน้าเว็บของเราก็จะเลื่อนไปด้วย
วิธีการแก้ก็คือใส่คลาส table-responsive คลอบลงไปก่อนสร้างตารางเลย
โค้ด: เลือกทั้งหมด
<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>
เราสามารถเลื่อนดูขอมูลในตารางที่ด้านล่างของตารางได้เลย หน้าเว็บของเราก็ไม่ได้เลื่อนตามตารางขอมูลด้วย เป็นอย่างไรกันบ้างล่ะครับสำหรับ class="table-responsive" ของ bootstrap เป็นไรที่ดีมาก ๆ เลยนะครับก็อย่าลืมนำ class นี้ไปใช้กันนะครับก่อนจะใช้ก็อย่าลืมติดตั้ง bootstrap เอาไว้ก่อนนะครับเดียวจะใช้ class นี้ไม่ได้ก็หวังว่าบทความนี้จะเป็นประโยชน์ให้กับผู้ที่เข้ามาอ่านกันไม่มากก็น้อยนะครับ