PHP Ionic Angular HTML5 AJAX Javascript CSS MySQL jQuery Forum


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

21 August 2009 By Ninenik Narkdee
css ตรึงหัวข้อ ตาราง

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





ตัวอย่าง

คอลัมน์ที่ 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 เป็นกำลังใจ ในการสร้างบทความใหม่ๆ น่ะครับ



บริการเว็บ server web hosting
บริการเว็บ server web hosting


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







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