PHP Ionic Angularjs Phonegap AJAX Javascript CSS MySQL jQuery Forum

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

21 August 2009 By


ตัวอย่าง

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


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





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