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

เขียนเมื่อ 14 ปีก่อน โดย Ninenik Narkdee
ตรึงหัวข้อ ตาราง css

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

ดูแล้ว 18,179 ครั้ง




ตัวอย่าง

คอลัมน์ที่ 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 สำหรับอ้างอิง





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

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


  • ถาม-ตอบ กรุณา ล็อกอินเข้าระบบ
  • เปลี่ยน


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







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