ตรึงหัวข้อ header ในตาราง table ด้วย css รองรับ Firefox และ IE
เขียนเมื่อ 13 ปีก่อน โดย Ninenik Narkdeeตรึงหัวข้อ ตาราง css
คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ ตรึงหัวข้อ ตาราง css
คำเตือน! เนื้อหาต่อไปนี้ เป็นเนื้อหาเก่า อาจจะไม่เหมาะสำหรับนำไปใช้งาน
หรือไม่สามารถใช้งานได้แล้ว
ลองดูที่ใหม่กว่า http://www.ninenik.com/content.php?arti_id=307 เป็นแนวทางแทน
ลองดูที่ใหม่กว่า http://www.ninenik.com/content.php?arti_id=307 เป็นแนวทางแทน
ไปที่ Copy
ตัวอย่าง
คอลัมน์ที่ 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 สำหรับอ้างอิง
Top
Copy
ขอบคุณทุกการสนับสนุน
![]()