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

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

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

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

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

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

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>