Posted By

jsatt on 09/27/09


Tagged

header table html jquery head heading sample fixed frozen non-scrolling


Versions (?)

Who likes this?

2 people have marked this snippet as a favorite

alejandrosuch
rhainek


Fixed Table Header Sample HTML


 / Published in: HTML
 

URL: http://jsatt.blogspot.com

  1. <title>jquery Fixed Table Header</title>
  2. <style type="text/css">
  3. .scrollContainer{width: 400px; height: 100px; overflow:auto;}
  4. .scrollContainer table{width:100%;}
  5. .scrollContainer th{background:#ff9; border:1px solid #fc0;}
  6. .scrollContainer td{border:1px solid #9c0
  7. <!---jquery script here--->
  8. </head>
  9. <div class="scrollContainer">
  10. <tr>
  11. <th>Column 1</th>
  12. <th>Column 2</th>
  13. <th>Column 3</th>
  14. <th>Column 4</th>
  15. </tr>
  16. <tr>
  17. <td>data 1</td>
  18. <td>data 2</td>
  19. <td>data 3</td>
  20. <td>data 4</td>
  21. </tr>
  22. <tr>
  23. <td>data 1</td>
  24. <td>data 2</td>
  25. <td>data 3</td>
  26. <td>data 4</td>
  27. </tr>
  28. <tr>
  29. <td>data 1</td>
  30. <td>data 2</td>
  31. <td>data 3</td>
  32. <td>data 4</td>
  33. </tr>
  34. <tr>
  35. <td>data 1</td>
  36. <td>data 2</td>
  37. <td>data 3</td>
  38. <td>data 4</td>
  39. </tr>
  40. <tr>
  41. <td>data 1</td>
  42. <td>data 2</td>
  43. <td>data 3</td>
  44. <td>data 4</td>
  45. </tr>
  46. <tr>
  47. <td>data 1</td>
  48. <td>data 2</td>
  49. <td>data 3</td>
  50. <td>data 4</td>
  51. </tr>
  52. <tr>
  53. <td>data 1</td>
  54. <td>data 2</td>
  55. <td>data 3</td>
  56. <td>data 4</td>
  57. </tr>
  58. <tr>
  59. <td>data 1</td>
  60. <td>data 2</td>
  61. <td>data 3</td>
  62. <td>data 4</td>
  63. </tr>
  64. <tr>
  65. <td>data 1</td>
  66. <td>data 2</td>
  67. <td>data 3</td>
  68. <td>data 4</td>
  69. </tr>
  70. <tr>
  71. <td>data 1</td>
  72. <td>data 2</td>
  73. <td>data 3</td>
  74. <td>data 4</td>
  75. </tr>
  76. <tr>
  77. <td>data 1</td>
  78. <td>data 2</td>
  79. <td>data 3</td>
  80. <td>data 4</td>
  81. </tr>
  82. <tr>
  83. <td>data 1</td>
  84. <td>data 2</td>
  85. <td>data 3</td>
  86. <td>data 4</td>
  87. </tr>
  88. <tr>
  89. <td>data 1</td>
  90. <td>data 2</td>
  91. <td>data 3</td>
  92. <td>data 4</td>
  93. </tr>
  94. </div>
  95. </body>
  96. </html>

Report this snippet  

You need to login to post a comment.