<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Table Header Fixed</title>
<style>
table {
width: 100%;
border-collapse: collapse;
}
th, td {
padding: 8px;
text-align: left;
border: 1px solid #ddd;
}
.fixed-header {
position: fixed;
top: 0;
z-index: 10;
background-color: #ffffff;
display: none;
}
</style>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<table id="myTable">
<thead>
<tr>
<th>หัวข้อ 1</th>
<th>หัวข้อ 2</th>
<th>หัวข้อ 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>ข้อมูล 1</td>
<td>ข้อมูล 2</td>
<td>ข้อมูล 3</td>
</tr>
<tr>
<td>ข้อมูล 1</td>
<td>ข้อมูล 2</td>
<td>ข้อมูล 3</td>
</tr> <tr>
<td>ข้อมูล 1</td>
<td>ข้อมูล 2</td>
<td>ข้อมูล 3</td>
</tr> <tr>
<td>ข้อมูล 1</td>
<td>ข้อมูล 2</td>
<td>ข้อมูล 3</td>
</tr> <tr>
<td>ข้อมูล 1</td>
<td>ข้อมูล 2</td>
<td>ข้อมูล 3</td>
</tr> <tr>
<td>ข้อมูล 1</td>
<td>ข้อมูล 2</td>
<td>ข้อมูล 3</td>
</tr> <tr>
<td>ข้อมูล 1</td>
<td>ข้อมูล 2</td>
<td>ข้อมูล 3</td>
</tr> <tr>
<td>ข้อมูล 1</td>
<td>ข้อมูล 2</td>
<td>ข้อมูล 3</td>
</tr> <tr>
<td>ข้อมูล 1</td>
<td>ข้อมูล 2</td>
<td>ข้อมูล 3</td>
</tr> <tr>
<td>ข้อมูล 1</td>
<td>ข้อมูล 2</td>
<td>ข้อมูล 3</td>
</tr> <tr>
<td>ข้อมูล 1</td>
<td>ข้อมูล 2</td>
<td>ข้อมูล 3</td>
</tr> <tr>
<td>ข้อมูล 1</td>
<td>ข้อมูล 2</td>
<td>ข้อมูล 3</td>
</tr> <tr>
<td>ข้อมูล 1</td>
<td>ข้อมูล 2</td>
<td>ข้อมูล 3</td>
</tr> <tr>
<td>ข้อมูล 1</td>
<td>ข้อมูล 2</td>
<td>ข้อมูล 3</td>
</tr> <tr>
<td>ข้อมูล 1</td>
<td>ข้อมูล 2</td>
<td>ข้อมูล 3</td>
</tr>
<tr>
<td>ข้อมูล 1</td>
<td>ข้อมูล 2</td>
<td>ข้อมูล 3</td>
</tr> <tr>
<td>ข้อมูล 1</td>
<td>ข้อมูล 2</td>
<td>ข้อมูล 3</td>
</tr> <tr>
<td>ข้อมูล 1</td>
<td>ข้อมูล 2</td>
<td>ข้อมูล 3</td>
</tr> <tr>
<td>ข้อมูล 1</td>
<td>ข้อมูล 2</td>
<td>ข้อมูล 3</td>
</tr> <tr>
<td>ข้อมูล 1</td>
<td>ข้อมูล 2</td>
<td>ข้อมูล 3</td>
</tr> <tr>
<td>ข้อมูล 1</td>
<td>ข้อมูล 2</td>
<td>ข้อมูล 3</td>
</tr> <tr>
<td>ข้อมูล 1</td>
<td>ข้อมูล 2</td>
<td>ข้อมูล 3</td>
</tr> <tr>
<td>ข้อมูล 1</td>
<td>ข้อมูล 2</td>
<td>ข้อมูล 3</td>
</tr> <tr>
<td>ข้อมูล 1</td>
<td>ข้อมูล 2</td>
<td>ข้อมูล 3</td>
</tr> <tr>
<td>ข้อมูล 1</td>
<td>ข้อมูล 2</td>
<td>ข้อมูล 3</td>
</tr> <tr>
<td>ข้อมูล 1</td>
<td>ข้อมูล 2</td>
<td>ข้อมูล 3</td>
</tr>
<tr>
<td>ข้อมูล 1</td>
<td>ข้อมูล 2</td>
<td>ข้อมูล 3</td>
</tr>
<tr>
<td>ข้อมูล 1</td>
<td>ข้อมูล 2</td>
<td>ข้อมูล 3</td>
</tr> <tr>
<td>ข้อมูล 1</td>
<td>ข้อมูล 2</td>
<td>ข้อมูล 3</td>
</tr> <tr>
<td>ข้อมูล 1</td>
<td>ข้อมูล 2</td>
<td>ข้อมูล 3</td>
</tr> <tr>
<td>ข้อมูล 1</td>
<td>ข้อมูล 2</td>
<td>ข้อมูล 3</td>
</tr> <tr>
<td>ข้อมูล 1</td>
<td>ข้อมูล 2</td>
<td>ข้อมูล 3</td>
</tr> <tr>
<td>ข้อมูล 1</td>
<td>ข้อมูล 2</td>
<td>ข้อมูล 3</td>
</tr> <tr>
<td>ข้อมูล 1</td>
<td>ข้อมูล 2</td>
<td>ข้อมูล 3</td>
</tr> <tr>
<td>ข้อมูล 1</td>
<td>ข้อมูล 2</td>
<td>ข้อมูล 3</td>
</tr> <tr>
<td>ข้อมูล 1</td>
<td>ข้อมูล 2</td>
<td>ข้อมูล 3</td>
</tr> <tr>
<td>ข้อมูล 1</td>
<td>ข้อมูล 2</td>
<td>ข้อมูล 3</td>
</tr> <tr>
<td>ข้อมูล 1</td>
<td>ข้อมูล 2</td>
<td>ข้อมูล 3</td>
</tr> <tr>
<td>ข้อมูล 1</td>
<td>ข้อมูล 2</td>
<td>ข้อมูล 3</td>
</tr> <tr>
<td>ข้อมูล 1</td>
<td>ข้อมูล 2</td>
<td>ข้อมูล 3</td>
</tr> <tr>
<td>ข้อมูล 1</td>
<td>ข้อมูล 2</td>
<td>ข้อมูล 3</td>
</tr> <tr>
<td>ข้อมูล 1</td>
<td>ข้อมูล 2</td>
<td>ข้อมูล 3</td>
</tr> <tr>
<td>ข้อมูล 1</td>
<td>ข้อมูล 2</td>
<td>ข้อมูล 3</td>
</tr>
<!-- เพิ่มข้อมูลอื่นๆ -->
</tbody>
</table>
<script>
$(document).ready(function() {
var $table = $("#myTable");
var $header = $table.find("thead");
var $fixedHeader = $header.clone().addClass("fixed-header").removeClass("thead");
// เพิ่มตารางที่ตรึงหลังจากตารางจริง
$table.after($fixedHeader);
// ตั้งค่าความกว้างของแต่ละคอลัมน์ให้ตรงกัน
function setColumnWidths() {
$fixedHeader.find('th').each(function(index) {
$(this).width($header.find('th').eq(index).width());
});
}
// เรียกใช้เมื่อโหลดหน้า
setColumnWidths();
// ตรึงแนวหัวตารางเมื่อเลื่อน
$(window).scroll(function() {
var offset = $header.offset().top;
var scrollTop = $(window).scrollTop();
if (scrollTop >= offset && !$fixedHeader.is(":visible")) {
$fixedHeader.show();
} else if (scrollTop < offset && $fixedHeader.is(":visible")) {
$fixedHeader.hide();
}
});
// เรียกใช้เมื่อมีการเปลี่ยนแปลงขนาดหน้าจอ
$(window).resize(setColumnWidths);
});
</script>
</body>
</html>
PHP CI MANIA - PHP Code Generator
โปรแกรมช่วยสร้างโค้ด "ลดเวลาการเขียนโปรแกรม"
