วิธีการ fix คอลัมน์ในตาราง html table ให้ชิดซ้ายไว้เวลา Horizontal scrolling เหมือนใน Excel

เราสามารถใช้ CSS ช่วย fix คอลัมน์ ในตาราง HTML Table <td> หรือ <th> ให้ชิดซ้ายค้างไว้ได้เวลาแสดงผลตารางที่มีจำนวนคอลัมน์ยาว ๆ แล้วต้องเลื่อนหน้าจอไปทางขวา วิธีการนี้มีประโยชน์มากโดยเฉพาะเวลาที่แสดงผลเวปเราบนมือถือ ที่มีพื้นที่จำกัด แล้วไม่อยากเปลี่ยนวิธีการ Render ใหม่จาก table ไปใช้ div การจัดตารางแบบอื่นแทน

วิธีการ คือการใช้ CSS Sticky ควบคู่กับ overflow-x โดยวิธีการเขียน ถ้าเราใช้ Tailwind CSS สามารถเพิ่ม class ได้ตามนี้เลยครับ (สามารถแปลงเป็น CSS ปกติก็ใช้งานได้เหมือนกันครับ)

1. เพิ่ม Wrapper ขึ้นมาคลุม Table

กำหนด Wrapper element ขึ้นมา เพื่อบอกขอบเขตว่า table หรือ element ที่อยู่ภายใต้ wrapper นี้จะถูกซ่อนและแสดง scrollbar ด้านล่างขึ้นมาให้ สามารถทำการเลื่อน ซ้ายขวา ได้ ถ้า element มีขนาดเกินหน้าต่าง browser ของเรา โดยทำการกำหนด overflow-x-auto และ w-full

<div class="overflow-x-auto w-full">
    <!-- สร้างตาราง ในนี้ -->
</div>

2. กำหนด relative ใน Table

ใน tag <td> หรือ <th> ที่เราต้องการให้ fix คอลัมน์ไว้ทางซ้าย จะต้องมีการกำหนด position: sticky ดังนั้นเราจึงต้องมีการกำหนด position: relative ให้กับ parent Element ที่เราต้องการให้เป็นขอบเขตในการ fix การแสดงผลไว้

<table class="relative">
    <!-- tr, td -->
</table>

3. กำหนดการ fix คอลัมน์ <td>, <th> ด้วย CSS Postion Sticky

สุดท้ายทำการกำหนด postion: sticky ให้กับคอลัมน์ที่เราต้องการ ชิดซ้ายไว้ในตาราง ตามตัวอย่างนี้ครับ

<tr>
    <td class="sticky left-0 bg-white z-10">หัวคอลัมน์</td>
    <td>A</td>
    <td>B</td>
    <td>C</td>
    <!--- คอลัมน์อื่น ๆ -->
</tr>

จาก tag <td> เรามีการกำหนด

sticky และ left-0 เพื่อให้ Cell แระในแต่ละแถวชิดที่ขอบซ้ายของตารางของเรา
bg-white เพื่อป้องกันไม่ให้ ข้อมูลใน Cell ถัด ๆ ไป มาซ้อนกับตัวหนังสือใน Cell หลักของเราเวลาเลื่อนหน้าจอ แน่นอนว่า เราเปลี่ยนจาก bg-white เป็นสีอื่นให้ตรงกับ design ของตารางเราได้ครับ
z-10 อันนี้เป็นการกำหนด layer ในการแสดงผล ให้แน่ใจว่า Cell ของเราจะแสดงบน content อื่น ๆ ที่อาจจะซ้อนกับ คอลัมน์ของเราได้ โดยเฉพาะ ถ้าเรามี dropdown / header / footer อื่น ๆ ที่มีการ fix position ไว้ด้วยเหมือนกัน ค่า z-10 นี้สามารถเปลี่ยนให้เหมาะสมกับ layer html ในเวปของเราได้ครับ

** Note ไว้นิดนึงว่า position: sticky นี้ไม่รองรับใน Internet Explorer นะครับ แต่ถ้าแน่ใจว่าเวปของเราไม่ได้มีการใช้งานบน IE แล้ว หรือผู้ใช้งานเป็นส่วนน้อยมาก ๆ แน่ ๆ แล้วก็คงไม่เป็นไรแล้วครับ