Fixed Table Header Scrolling
ในปัจจุบันในการพัฒนา website เราจะเห็นว่า Table เกือบจะเป็นส่วนหนึ่งในการพัฒนาของแต่ละหน้า ซึ่งส่วนใหญ่จะเป็นการแสดงผลของการค้นหาข้อมูลต่างๆของเมนูหรือหัวข้อในแต่ล่ะเรื่อง บ้างก็อาจจะมีข้อมูลน้อย บ้างก็อาจจะมีข้อมูลเยอะ ทำให้การแสดงผลมีความยาวล้นหน้าเพจ ถึงแม้ว่าปัจจุบันจะมีการนำ paging มาใช้แต่ในบางกรณีอาจจะมีความจำเป็นที่ต้องการตรวจสอบข้อมูลในการค้นหาทั้งหมดในหน้าเดียวกัน แต่ปัญหาที่ตามมาในการแสดงผลทั้งหมดในหน้าเดียวกันก็คือเมื่อเรา scroll ลงมาข้างล่างสุด Header ของตัวตารางจะไม่ Fixed ไว้ และเลื่อนหายไปข้างบน ทำให้ยากลำบากในการตรวจสอบข้อมูล เนื่องจากผู้ใช้งานอาจจะลืมว่าคอลัมภ์ที่กำลังตรวจสอบอยู่นั้นคือคอลัมภ์อะไร จึงต้อง scroll ขึ้นไปดู Header อีกครั้ง ทำให้มีความล่าช้าในการตรวจสอบข้อมูล วันนี้จึงนำวิธีการ Fixed Header ของตาราง โดยใช้ css มาเสนอเพื่อเป็นแนวทางในการพัฒนากับผู้อ่าน ดังนี้ค่ะ ตัวอย่างที่1 (CSS ในหน้า Html เดียวกัน)) tbody { display:block; height:400px; overflow:auto; } thead, tbody tr { display:table; width:100%; table-layout:fixed; } … Read more