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

6 เมษายน 2567 เวลาอ่าน 2 นาที

เราสามารถใช้ 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 แล้ว หรือผู้ใช้งานเป็นส่วนน้อยมาก ๆ แน่ ๆ แล้วก็คงไม่เป็นไรแล้วครับ

ตัวอย่างผลการแสดงผล Sticky คอลัมน์ใน Table

 

 

Phattarachai Chaimongkol

เกี่ยวกับ phattarachai.dev

ผมอ๊อฟนะครับ เป็นผู้ประกอบการอิสระ ที่ปรึกษาทางด้าน Web Application Development ให้แก่องค์กร ธุรกิจ SME และหน่วยงานราชการ
Web Developer ผู้มีใจรักใน Laravel เป็นพาร์ทเนอร์บริษัท Digital Agency ชั้นนำทางด้าน UX/UI เพื่อพัฒนาโปรเจคให้แก่ลูกค้า ผมช่วยสร้างเครื่องมือทางด้าน Web ที่มีคุณภาพให้ผู้ประกอบการดำเนินธุรกิจได้ง่ายขึ้นใช้งานได้จริง เน้นประสบการณ์ ความชำนาญ ผลงานคุ้มค่าเทียบเท่าจ้างงานกับบริษัทใหญ่ ๆ

เรื่องที่เกี่ยวข้อง

มีอะไรใหม่ใน Pest V2 บ้าง
6 เมษายน 2567
มีอะไรใหม่ใน Pest V2 บ้าง
วิธีการเคลียร์ไฟล์ Binary Log ใน MySQL
6 เมษายน 2567
วิธีการเคลียร์ไฟล์ Binary Log ใน MySQL
วิธีการย้าย WSL Ubuntu  จาก Windows เครื่องหนึ่งไปอีกเครื่อง
6 เมษายน 2567
วิธีการย้าย WSL Ubuntu จาก Windows เครื่องหนึ่งไปอีกเครื่อง