ตรึงหัวข้อ header ในตาราง table ด้วย css รองรับ Firefox และ IE
ตัวอย่าง
| คอลัมน์ที่ 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>
บทความในหมวดที่่น่าสนใจ อื่นๆ
