ตรึงหัวข้อ header ในตาราง table ด้วย css รองรับ Firefox และ IE

21 August 2009 By Ninenik Narkdee

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

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

คำเตือน! เนื้อหาต่อไปนี้ เป็นเนื้อหาเก่า อาจจะไม่เหมาะสำหรับนำไปใช้งาน หรือไม่สามารถใช้งานได้แล้ว
ลองดูที่ http://www.ninenik.com/content.php?arti_id=307 เป็นแนวทางแทน

ตัวอย่าง

คอลัมน์ที่ 1	คอลัมน์ที่ 2	คอลัมน์ที่ 3	คอลัมน์ที่ 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

CSS Code

<style type="text/css"> 
div#divTblHdFix{
	width:75%;
	height:200px;
	border:1px solid #333333;
	border-width:0 0 1px 0;
	overflow:hidden;
}
table#tblHdFix{
	width:100%;
	height:200px;
	border:1px solid #333333;
}
thead.theadFix{
	background-color:#2DBAC6;
}
thead.theadFix > tr > th{
	color:#FFFFFF;
	border: solid #333333;
	border-width: 0px 1px 1px 0px;	
}
tr.tr-odd{
	background-color:#FFFFFF;
}
tr.tr-odd > td{
	text-align:center;
	border: solid #333333;
	border-width:0px 1px 1px 0px;		
}
tr.tr-even{
	background-color:#EAEAEA;
}
tr.tr-even > td{
	text-align:center;
	border: solid #333333;
	border-width: 0px 1px 1px 0px;			
}
tbody.tbodyShow{
	height: 200px;
	overflow-y: auto;
	overflow-x: hidden;
}	
</style>
<!--[if IE]>
    <style type="text/css">
		div#divTblHdFix{
            position: relative;
            width:75%;
            height:200px;
            overflow-y: scroll;
            overflow-x: hidden;
            border:1px solid #333333;
        }
        table#tblHdFix{
            width:100%;
        }
        thead tr {
            position: absolute;
            top: expression(this.offsetParent.scrollTop);
        }
        tbody.tbodyShow{
            height: auto;
        }
    </style>
<![endif]-->

HTML Code

<div id="divTblHdFix">
  <table border="0" cellpadding="0" cellspacing="0" id="tblHdFix" >
<thead class="theadFix">
        <tr>
          <th>คอลัมน์ที่ 1</th>
          <th>คอลัมน์ที่ 2</th>
          <th>คอลัมน์ที่ 3</th>
          <th>คอลัมน์ที่ 4</th>
        </tr>    
    </thead>
    <tbody class="tbodyShow">
	    
        <tr class="tr-odd">
          <td>ข้อมูลที่ 1</td>
          <td>ข้อมูลที่ 1</td>
          <td>ข้อมูลที่ 1</td>
          <td>ข้อมูลที่ 1</td>
        </tr>    
        
        <tr class="tr-even">
          <td>ข้อมูลที่ 2</td>
          <td>ข้อมูลที่ 2</td>
          <td>ข้อมูลที่ 2</td>
          <td>ข้อมูลที่ 2</td>
        </tr>    
        
        <tr class="tr-odd">
          <td>ข้อมูลที่ 3</td>
          <td>ข้อมูลที่ 3</td>
          <td>ข้อมูลที่ 3</td>
          <td>ข้อมูลที่ 3</td>
        </tr>    
        
        <tr class="tr-even">
          <td>ข้อมูลที่ 4</td>
          <td>ข้อมูลที่ 4</td>
          <td>ข้อมูลที่ 4</td>
          <td>ข้อมูลที่ 4</td>
        </tr>    
        
        <tr class="tr-odd">
          <td>ข้อมูลที่ 5</td>
          <td>ข้อมูลที่ 5</td>
          <td>ข้อมูลที่ 5</td>
          <td>ข้อมูลที่ 5</td>
        </tr>    
        
        <tr class="tr-even">
          <td>ข้อมูลที่ 6</td>
          <td>ข้อมูลที่ 6</td>
          <td>ข้อมูลที่ 6</td>
          <td>ข้อมูลที่ 6</td>
        </tr>    
        
        <tr class="tr-odd">
          <td>ข้อมูลที่ 7</td>
          <td>ข้อมูลที่ 7</td>
          <td>ข้อมูลที่ 7</td>
          <td>ข้อมูลที่ 7</td>
        </tr>    
        
        <tr class="tr-even">
          <td>ข้อมูลที่ 8</td>
          <td>ข้อมูลที่ 8</td>
          <td>ข้อมูลที่ 8</td>
          <td>ข้อมูลที่ 8</td>
        </tr>    
        
        <tr class="tr-odd">
          <td>ข้อมูลที่ 9</td>
          <td>ข้อมูลที่ 9</td>
          <td>ข้อมูลที่ 9</td>
          <td>ข้อมูลที่ 9</td>
        </tr>    
        
        <tr class="tr-even">
          <td>ข้อมูลที่ 10</td>
          <td>ข้อมูลที่ 10</td>
          <td>ข้อมูลที่ 10</td>
          <td>ข้อมูลที่ 10</td>
        </tr>    
        
        <tr class="tr-odd">
          <td>ข้อมูลที่ 11</td>
          <td>ข้อมูลที่ 11</td>
          <td>ข้อมูลที่ 11</td>
          <td>ข้อมูลที่ 11</td>
        </tr>    
        
        <tr class="tr-even">
          <td>ข้อมูลที่ 12</td>
          <td>ข้อมูลที่ 12</td>
          <td>ข้อมูลที่ 12</td>
          <td>ข้อมูลที่ 12</td>
        </tr>    
        
        <tr class="tr-odd">
          <td>ข้อมูลที่ 13</td>
          <td>ข้อมูลที่ 13</td>
          <td>ข้อมูลที่ 13</td>
          <td>ข้อมูลที่ 13</td>
        </tr>    
        
        <tr class="tr-even">
          <td>ข้อมูลที่ 14</td>
          <td>ข้อมูลที่ 14</td>
          <td>ข้อมูลที่ 14</td>
          <td>ข้อมูลที่ 14</td>
        </tr>    
        
        <tr class="tr-odd">
          <td>ข้อมูลที่ 15</td>
          <td>ข้อมูลที่ 15</td>
          <td>ข้อมูลที่ 15</td>
          <td>ข้อมูลที่ 15</td>
        </tr>    
        
	</tbody>
  </table>
</div>

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

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

เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ