ตัวอย่าง
| คอลัมน์ที่ 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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 | <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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 | <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> |
