ตรึง หัวข้อ คอลัมน์ ในตาราง ด้วย เทคนิคที่ง่ายกว่า รองรับทุกบราวเซอร์

06 August 2010 เขียนเมื่อ 14 ปีก่อน โดย Ninenik Narkdee

ตรึงหัวข้อ ตาราง

คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ ตรึงหัวข้อ ตาราง

ดูแล้ว 28,834 ครั้ง

ตรึง หัวคอลัมน์ ในตาราง ด้วย เทคนิคที่ง่ายกว่า รองรับทุกบราวเซอร์

จากที่เคยมีหัวข้อ ตรึงหัวข้อ header ในตาราง table ด้วย css รองรับ Firefox และ IE

https://www.ninenik.com/ตรึงหัวข้อ_header_ในตาราง_table_ด้วย_css_รองรับ_Firefox_และ_IE-217.html

ซึ่งสามารถทำงานใน Firefox กับ IE7 แต่ไม่สามารถทำงานได้กับ IE8 ,Chrome,Safari,Opera

มีวิธีการที่ง่ายกว่า และรองรับทุกบราวเซอร์ ด้วยเทคนิค และตัวอย่างโค้ดต่อไปนี้ สามารถนำไปประยุกต์ใช้งาน และปรับ
รูปแบบได้ตามต้องการ
ตัวอย่าง

Column 1

Column 2

Column 3

Column 4

1	1	1	1
2	2	2	2
3	3	3	3
4	4	4	4
5	5	5	5
6	6	6	6
7	7	7	7
8	8	8	8
9	9	9	9
10	10	10	10
11	11	11	11
12	12	12	12
13	13	13	13
14	14	14	14
15	15	15	15
16	16	16	16
17	17	17	17
18	18	18	18
19	19	19	19
20	20	20	20
21	21	21	21
22	22	22	22
23	23	23	23
24	24	24	24
25	25	25	25
26	26	26	26
27	27	27	27
28	28	28	28
29	29	29	29
30	30	30	30

CSS Code

<style type="text/css">
.containBody{
	height:300px;
	display:block;
	overflow:auto;	
	border-bottom:1px solid #CCC;
}
.tbl_headerFix{
	border-bottom:0px;	
}
</style>

ส่วนของเนื้อหา (ในที่นี้ใช้ PHP สร้างจำนวนแถว)

<table width="550" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="25%" align="center" bgcolor="#FFFF99">Column 1</td>
    <td width="25%" align="center" bgcolor="#FFFF99">Column 2</td>
    <td width="25%" align="center" bgcolor="#FFFF99">Column 3</td>
    <td width="25%" align="center" bgcolor="#FFFF99">Column 4</td>
  </tr>
  <tr>
    <td colspan="4" align="left" valign="top" >
  <div class="containBody">
    <table class="tbl_headerFix" width="100%" border="1" cellspacing="0" cellpadding="0" >
 <?php for($i=1;$i<=30;$i++){ ?>
      <tr>
        <td width="25%" align="center"><?=$i?></td>
        <td width="25%" align="center"><?=$i?></td>
        <td width="25%" align="center"><?=$i?></td>
        <td width="25%" align="center"><?=$i?></td>
      </tr>
<?php } ?>      
    </table>
</div>    
    </td>
  </tr>
</table>

เพิ่มเติมเนื้อหา ครั้งที่ 1 วันที่ 22-07-2017

อัพเดทตัวอย่างเพิ่มเติม ใช้งาน jquery

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<title>Document</title>
	<link rel="stylesheet" href="https://unpkg.com/bootstrap@3.3.7/dist/css/bootstrap.min.css"/>
</head>
<body>


<br>
<br>
<div class="container" style="width:800px;">
<div style="width:785px;height: 37px;">
<table id="myfixtable"  class="table table-stroped" style="margin-bottom:0px;">
    <thead></thead>
    <tbody style="visibility:hidden;"></tbody>
</table>
</div>    
<div class="bodytable" style="width:800px;overflow:auto;height:400px;">
<table id="mytable" class="table table-stroped">
<thead style="display:none;">
	<tr>
		<th>ID</th>
		<th>Name</th>
		<th>Gender</th>
		<th>Photo</th>
        <th>Save</th>
	</tr>
</thead>
<tbody>
<?php for($i=1;$i<20;$i++){?>        
 	<tr>
		<td><?=$i?></td>
		<td>
        ข้อมูลคอลัมน์  Name
        </td>
		<td>
        ข้อมูลคอลัมน์  Gender
        </td>
		<td>
        ข้อมูลคอลัมน์  Photo      
        </td>
        <td>
        <button class="btn btn-info btn-sm" name="save_one[2]" type="button">Save</button>
        </td>
	</tr>
 <?php } ?>
       
    </tbody>        
</table>
</div>


</div>     

<script src="https://unpkg.com/jquery@3.2.1"></script>
<script type="text/javascript">
$(function(){
	$("#myfixtable thead").html($("#mytable thead tr:eq(0)").clone());
	$("#myfixtable tbody").html($("#mytable tbody tr:eq(0)").clone());
});
</script>
</body>
</html>

DEMO 1

กด Like หรือ Share เป็นกำลังใจ ให้มีบทความใหม่ๆ เรื่อยๆ น่ะครับ

Tags:: ตาราง ตรึงหัวข้อ

URL สำหรับอ้างอิง

คำแนะนำ และการใช้งาน

สมาชิก กรุณา ล็อกอินเข้าระบบ เพื่อตั้งคำถามใหม่ หรือ ตอบคำถาม สมาชิกใหม่ สมัครสมาชิกได้ที่ สมัครสมาชิก

ถาม-ตอบ กรุณา ล็อกอินเข้าระบบ
User

Pass

Code
เปลี่ยน

จำข้อมูลการล็อกอิน
เข้าระบบอัตโนมัติ

( หรือ เข้าใช้งานผ่าน Social Login )

ล็อกอินด้วย Line

ล็อกอินด้วย Google

ล็อกอินด้วย Twitter

ล็อกอินด้วย Tiktok

ขอบคุณทุกการสนับสนุน

สนับสนุนเว็บไซต์เรา จ่ายด้วย Truemoney Wallet

20 บาท 50 บาท 100 บาท 300 บาท หรือ ระบุจำนวน