สอนวิธีทำ Responsive Table

จากบทความ “ใช้ html5 table อย่างไรให้เหมาะสม ?” ทำให้เรารู้แล้วว่าการใช้ table นั้นยังสามารถทำได้อยู่ถ้าข้อมูลนั้นเป็น tabular data ปัญหาต่อมาก็คือ เราจะทำอย่างไร เพื่อให้ table ยังคงสามารถแสดงผลได้ดีเมื่อดูด้วยหน้าจอขนาดเล็กๆ

โจทย์ของ Responsive Table

  • ใช้ CSSเราจะเน้นไปที่การใช้ CSS เข้ามาช่วยปรับการแสดงผลของ table ให้ดูดีใน viewport ขนาดต่างๆ
  • ไม่ต้องปรับ HTMLเราจะไม่ปรับ HTML หรือถ้าจำเป็นต้องปรับ ก็จะพยายามปรับให้น้อยที่สุด

Workshop – ทำตารางคะแนนบอลให้ Responsive

หลังจากที่เราได้โจทย์มา เราพบว่าตารางคะแนนบอลนั้นมีอยู่หลายคอลัมน์ด้วยกัน บางคอลัมน์นั้นสำคัญมาก แต่บางคอลัมน์ก็สำคัญน้อย หากเราดูตารางนี้ด้วย mobile ในแนวตั้ง มันคงจะอ่านได้ลำบาก เราจึงเลือกใช้วิธีตัดคอลัมน์ที่ไม่ค่อยสำคัญออกใน mobile

1. Hide Columns

No.สโมสรแข่งชนะเสมอแพ้ได้เสีย+/-รวม
1อาร์เซน่อล16112333171635
2เชลซี16103332181433
3แมนฯ ซิตี้16102447182932
4เอฟเวอร์ตัน1687127151231
5ลิเวอร์พูล1593334181630

เราใส่ “.hide-columns” เอาไว้ที่ table แล้วเขียน media queries แบบนี้

เมื่อ viewport มีขนาดเล็กกว่า 480px คอลัมน์ที่ไม่ค่อยสำคัญจะถูกตัดออกไป เราจะเห็นว่าวิธีนี้ทำให้ mobile users ได้รับ content ไม่เท่าเทียมกับ desktop users เราจึงจำเป็นต้องหาวิธีใหม่ มีวิธีไหนมั้ยที่จะไม่ต้องตัดคอลัมน์ใดๆ ออกไปเลย ?

  • ข้อดีทำได้สะดวก
  • ข้อเสียทำให้ mobile users ได้รับ content ไม่เท่าเทียมกับ desktop users

2. Flip

No.สโมสรแข่งชนะเสมอแพ้ได้เสีย+/-รวม
1อาร์เซน่อล16112333171635
2เชลซี16103332181433
3แมนฯ ซิตี้16102447182932
4เอฟเวอร์ตัน1687127151231
5ลิเวอร์พูล1593334181630

เราใส่ “.flip” เอาไว้ที่ table แล้วเขียน media queries แบบนี้

เราใช้วิธีตัด thead ซึ่งเป็นหัวข้อของแต่ละคอลัมน์ออก จากนั้นเรากำหนด td ให้เรียงต่อๆ กันในแนวตั้งแทน และสร้างหัวข้อของแต่ละคอลัมน์ขึ้นมาใหม่ด้วย CSS Pseudo-elements

วิธีนี้เราจำเป็นจะต้องปรับ html เล็กน้อย โดยการใส่ Data Attributes (data-*) เอาไว้ที่ td เพื่อบอกให้รู้ว่า td นั้นอยู่ในคอลัมน์ไหน แบบนี้

ถึงแม้ว่าวิธีนี้จะทำให้ users ได้รับ content เท่าเทียมกัน แต่มันก็ทำให้ mobile users ลำบากในการเปรียบเทียบ content ระหว่าง rows อยู่ดี

  • ข้อดีusers ได้รับ content เท่าเทียมกัน
  • ข้อเสียmobile users ไม่ค่อยสะดวกในการเปรียบเทียบ content ระหว่าง rows

3. Flip + Scroll

No.สโมสรแข่งชนะเสมอแพ้ได้เสีย+/-รวม
1อาร์เซน่อล16112333171635
2เชลซี16103332181433
3แมนฯ ซิตี้16102447182932
4เอฟเวอร์ตัน1687127151231
5ลิเวอร์พูล1593334181630

เราใส่ “.flip-scroll” เอาไว้ที่ table แล้วเขียน media queries แบบนี้

วิธีนี้ค่อนข้างจะซับซ้อนสักหน่อย เราเริ่มจากกำหนดให้ thead เรียงต่อๆ กันในแนวตั้ง ส่วน tr นั้นเราจะกำหนดให้เรียงต่อๆ กันในแนวนอน พร้อมกับปรับ td ให้เรียงต่อกันในแนวตั้ง และสุดท้ายเรากำหนดให้ tbody เป็น container ที่สามารถ scroll ได้ในแนวนอน

เราจะเห็นว่าวิธีนี้ทำให้ mobile users สามารถเปรียบเทียบ content ระหว่าง rows ได้ แต่มันก็ทำให้  mobile users จำเป็นจะต้อง scroll หากต้องการจะดู content ทั้งหมด

  • ข้อดีmobile users สามารถเปรียบเทียบ content ระหว่าง rows ได้
  • ข้อเสียmobile users จำเป็นต้อง scroll หากต้องการจะดู content ทั้งหมด

เลือกใช้ให้เหมาะสมกับ Content

เราจะเห็นแล้วว่าไม่มีวิธีไหนที่ดีที่สุด มีแต่วิธีที่เหมาะสมที่สุด ดังนั้นการจะเลือกใช้วิธีไหน ให้เราดู content ของเรา วิธีไหนที่จะทำให้ users พึงพอใจมากที่สุด หากบางคอลัมน์ไม่จำเป็นจริงๆ เราอาจใช้วิธี hide columns หาก users ไม่ต้องการเปรียบเทียบข้อมูลระหว่าง rows เราอาจใช้วิธี flip แต่ถ้า users ต้องการเปรียบเทียบ เราก็อาจใช้วิธี flip + scroll แทน เป็นต้น


Attachment : responsive_table.zip

(Visited 16,266 times, 5 visits today)

4 Responses to “สอนวิธีทำ Responsive Table”

  1. Topfy Roadbauy says:

    ขอบคุณมากครับ เป็นข้อมูลที่แจ๋วมากครับ

  2. sieo Aloha says:

    สุดยอดไปเลย ขอบคุณคร้าบบ

  3. ขอบคุณสำหรับ study case นี้ครับ :)

  4. นี่เป็นอีกวิธีที่น่าสนใจครับ

    https://github.com/filamentgroup/tablesaw

Leave a Reply