โปรดทำให้หัวตารางคงอยู่กับที่

 (btxx.org)
4 คะแนน โดย GN⁺ 2024-02-25 | 1 ความคิดเห็น | แชร์ทาง WhatsApp

โปรดทำให้หัวตารางคงอยู่กับที่

  • บนเว็บเรามักจะพบกับชุดข้อมูลขนาดใหญ่หรือเลย์เอาต์แบบตารางอยู่บ่อยครั้ง
  • ปัญหาเกิดขึ้นเมื่อเริ่มเลื่อนดูตารางที่มีหลายร้อยแถว
  • เมื่อหัวตารางหายไป ผู้ใช้จะจดจำได้ยากว่าแต่ละคอลัมน์เกี่ยวข้องกับอะไร

หัวตารางแบบคงที่

  • หัวตารางแบบคงที่อาจดูเหมือนเวทมนตร์ แต่จริง ๆ แล้วทำได้ง่ายมาก
  • เพียงเพิ่มคุณสมบัติ CSS แค่สองรายการให้กับ thead:
    • position: sticky;
    • top: 0;
  • sticky รองรับอย่างเสถียรในหลายเบราว์เซอร์ โดยมีอัตราการรองรับทั่วโลกราว 96%
  • ยังช่วยปรับปรุงประสบการณ์ผู้ใช้ได้อีกด้วย

ความเห็นของ GN⁺

  • เมื่อจัดการกับตารางขนาดใหญ่บนเว็บไซต์ การทำให้ผู้ใช้ยังมองเห็นหัวตารางได้ง่ายแม้จะเลื่อนลงไปแล้ว ช่วยยกระดับประสบการณ์ผู้ใช้ได้อย่างมาก
  • การที่สามารถใช้ position: sticky; ของ CSS เพื่อตรึงหัวตารางได้อย่างง่ายดาย เป็นข้อมูลที่มีประโยชน์สำหรับนักพัฒนาเว็บ
  • ฟีเจอร์นี้ได้รับการรองรับอย่างกว้างขวาง ทำให้นักพัฒนาเว็บมั่นใจได้ว่าสามารถนำไปใช้งานได้อย่างเสถียรในเบราว์เซอร์ต่าง ๆ

บทความที่เกี่ยวข้อง

1 ความคิดเห็น

 
GN⁺ 2024-02-25
ความเห็นจาก Hacker News
  • สามารถทำ sticky headers ได้ในแกนเดียว แต่กำลังรอวันที่ CSS จะรองรับทั้งสองแกน: ลิงก์อิสซูบน GitHub
  • แม้แทบไม่มีความรู้เรื่อง CSS ก็ยังสร้างเว็บแอปที่ใช้งานได้มาโดยตลอด ช่วงหลังได้ลองทำ fixed header กับตารางที่มีมากกว่า 20,000 แถว แต่ไม่ว่าจะลองตามคำแนะนำจากคลาสของ Bootstrap, Stack Overflow, GPT หรือ CodePen ก็เกิดผลข้างเคียงแปลก ๆ เสมอ ทว่าใช้ CodePen จากโพสต์นี้แล้วแก้ได้ภายใน 2 นาทีและนำขึ้นโปรดักชันได้เลย จึงอยากแสดงความขอบคุณ
  • การตรึงส่วนหัวตารางด้วย position: sticky; ดูเหมือนน่าจะทำได้ง่าย แต่พอทำอะไรบางอย่างกับเนื้อหาตารางก็จะเกิดปัญหา ตัวอย่างเช่น ได้เพิ่มฟีเจอร์คืนค่าตำแหน่งสกรอลล์เมื่อผู้ใช้เลื่อนตาราง ออกจากหน้า แล้วกลับมาอีกครั้ง แต่ตำแหน่งที่คืนค่ามาจะเลื่อนลงไปหนึ่งแถวเสมอ เมื่อมองผ่านส่วนหัวตารางแบบโปร่งใสจะเห็นว่าแถวที่ต้องการอยู่บนสุด แต่เพราะส่วนหัวซ้อนทับอยู่ แถวถัดไปจึงกลายเป็นแถวแรกที่มองเห็นได้ หากปรับตำแหน่งสกรอลล์โดยคำนึงถึงความสูงของส่วนหัว ตอนแรกก็ดูเหมือนจะใช้ได้ แต่บางครั้งก็คลาดไปไม่กี่พิกเซล สาเหตุคือ ตารางมีขนาดใหญ่จึงมีการ lazy loading ตามอีเวนต์สกรอลล์ และใช้ automatic table layout ทำให้บางครั้งเซลล์หัวตารางแคบเกินไปจนคำตัดบรรทัดและความสูงรวมของส่วนหัวเพิ่มขึ้น วิธีแก้สุดท้ายคือสร้าง ResizeObserver บนองค์ประกอบส่วนหัวเพื่อปรับตำแหน่งสกรอลล์แบบไดนามิกเมื่อความสูงเปลี่ยน: เอกสาร ResizeObserver
  • หากต้องการตรึงเส้นขอบของส่วนหัวตารางด้วย สามารถใช้โค้ด CSS ต่อไปนี้: 
    table thead:before {
  content: '';
  position: absolute;
  width: 100%;
  top: 0;
  border-top: 2px solid;
}

table thead:after {
  content: '';
  position: absolute;
  width: 100%;
  bottom: 0;
  border-bottom: 1px solid;
}
  • อยากให้ส่วนหัวตารางถูกตรึงโดยอัตโนมัติ เพราะหากนักพัฒนายอมลงแรงเพิ่มเพื่อใช้แท็ก <th> ก็น่าจะมีโอกาสสูงที่นั่นคือพฤติกรรมที่พวกเขาต้องการ
  • บน command line ควรส่งส่วนหัวไปที่ standard error (stderr) และส่งเนื้อหาไปที่ standard output (stdout) ไม่เช่นนั้นเวลาจัดเรียงข้อมูล ส่วนหัวอาจปะปนเข้าไปในผลลัพธ์ได้
  • ในอดีต Chrome เคยไม่อนุญาตให้ใช้พร็อพเพอร์ตี position: sticky กับองค์ประกอบ <thead> และ <tr>: ลิงก์อิสซูของ Chromium
  • มีข้อเสนอว่าแทนที่จะใช้ fixed header ให้ใช้ความสูง viewport แบบจำกัดเพื่อให้มองเห็นส่วนหัวได้ตลอดเวลา เช่น DataGridXL ก็ใช้วิธีนี้: ลิงก์ DataGridXL (ผู้แสดงความคิดเห็นระบุว่าเป็นผลงานของตน)
  • ในตัวอย่าง CodePen หากตั้งค่า top โดยคำนึงถึงเส้นขอบด้วย (เช่น 0 แทน -1px) ก็จะป้องกันไม่ให้เนื้อหาตารางไหลขึ้นไปทับส่วนหัวได้ มีการเปรียบเทียบตัวอย่าง CodePen สองแบบ: CodePen เดิม และ CodePen ที่ปรับปรุงแล้ว
  • บางคนอยากพูดว่า "ได้โปรดอย่าทำเลย": ลิงก์การสนทนาบน Hacker News