EP3 ทำให้ตารางใน HTML ของคุณมีความสะดวกสบายยิ่งขึ้นด้วย Sticky Header

การทำ Sticky Header ในตาราง HTML คือการทำให้แถวหัวตาราง (Header Row) ยังคงอยู่ที่ด้านบนสุดของหน้าจอในขณะที่เลื่อนดูข้อมูลที่อยู่ด้านล่าง การใช้เทคนิคนี้ช่วยให้การอ่านและเปรียบเทียบข้อมูลในตารางยาว ๆ ง่ายขึ้นโดยที่ไม่ต้องเลื่อนกลับขึ้นไปดูหัวตารางทุกครั้ง มาเรียนรู้วิธีการสร้างและตกแต่งตารางแบบ Sticky Header ด้วย HTML และ CSS กันเถอะ!
table {
width: 100%;
border-collapse: collapse;
}
th, td {
border: 1px solid black;
padding: 8px;
text-align: left;
}
th {
background-color: #f2f2f2;
position: sticky;
top: 0;
z-index: 1;
}
tr:nth-child(even) {
background-color: #f9f9f9;
}
.table-container {
max-height: 400px;
overflow-y: auto;
}
#HTML
#CSS
#StickyHeader
#WebDevelopment
#FrontendDevelopment
#WebDesign
#CodingTips
#Programming
#LearnToCode
#TechTips