โดยการตั้งค่า position: sticky และ top: 0 เราสามารถสร้างหัวตารางที่ติดตลอดเมื่อเลื่อนลงได้
ตัวอย่างที่ 1: ตารางพร้อมเนื้อหาเพิ่มเติม
<!DOCTYPE html> <html> <head> <style> div { color: white; display: flex; padding: 2%; background-color: rgba(190,155,150); height: 135px; overflow-y: scroll; } td,th,p { text-align: center; font-size: 1.25em; } table { padding: 3%; border-collapse: collapse; border: 2px ridge green; } th { top: 0; position: sticky; background: #e5d2f1; color: black; } </style> </head> <body> <div> <table> <thead> <tr> <th>A </th> <th>B </th> <th>C </th> <th>D </th> <th>E </th> </tr> </thead> <tr> <td>Hey</td> <td>Hey</td> <td>Hey</td> <td>Hey</td> <td>Hey</td> </tr> <tr> <td>Demo</td> <td>Demo</td> <td>Demo</td> <td>Demo</td> <td>Demo</td> </tr> <tr> <td>Yo</td> <td>Yo</td> <td>Yo</td> <td>Yo</td> <td>Yo</td> </tr> <tr> <td>Demo</td> <td>Demo</td> <td>Demo</td> <td>Demo</td> <td>Demo</td> </tr> </table> <p> Duis tincidunt fermentum ipsum vel sagittis. Sed ultrices quis dui ut rutrum. Quisque et varius tellus, ut vestibulum purus. Etiam in erat fringilla, laoreet libero eu, facilisis ante. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Duis eu ornare augue, ut facilisis odio. </p> </div> </body> </html>
ตัวอย่างที่ 2: ตารางแบบง่าย หัวตารางติดสีเขียว
<!DOCTYPE html> <html> <head> <style> div { padding: 2%; height: 40px; overflow-y: scroll; box-shadow: inset 0 0 12px lightgreen; } tr th { background: #25f2f1; } table { text-align: center; position: relative; border-collapse: separated; width: 100%; } th { top: 0; position: sticky; background: white; } </style> </head> <body> <div> <table> <thead> <tr> <th>A </th> <th>B </th> <th>C </th> <th>D </th> <th>E </th> </tr> </thead> <tr> <td>Hey</td> <td>Hey</td> <td>Hey</td> <td>Hey</td> <td>Hey</td> </tr> <tr> <td>Demo</td> <td>Demo</td> <td>Demo</td> <td>Demo</td> <td>Demo</td> </tr> <tr> <td>Yo</td> <td>Yo</td> <td>Yo</td> <td>Yo</td> <td>Yo</td> </tr> <tr> <td>Demo</td> <td>Demo</td> <td>Demo</td> <td>Demo</td> <td>Demo</td> </tr> </table> </div> </body> </html>
คุณสมบัติสำคัญคือ position: sticky ร่วมกับ top: 0 บนแถวหัว (<th>) และคอนเทนเนอร์ต้องมี overflow-y: scroll หรือ auto และความสูงจำกัด
