Fixed table header row and column in jQuery

SUBMITTED BY: Guest

DATE: Jan. 14, 2014, 7:21 p.m.

FORMAT: JavaScript

SIZE: 6.7 kB

Raw Download

HITS: 17781

Report
  1. <html>
  3. <!--
  5. copyright pavan
  6. http://fixed-header-using-jquery.blogspot.com/2009/05/scrollable-table-with-fixed-header-and.html
  8. -->
  10. <head>
  11. <script type="text/javascript" src="http://jqueryui.com/latest/jquery-1.3.2.js"></script>
  12. <script>
  14. $(document).ready(function(){
  15. fnAdjustTable();
  16. });
  18. fnAdjustTable = function(){
  20. var colCount = $('#firstTr>td').length; //get total number of column
  22. var m = 0;
  23. var n = 0;
  24. var brow = 'mozilla';
  26. jQuery.each(jQuery.browser, function(i, val) {
  27. if(val == true){
  28. brow = i.toString();
  29. }
  30. });
  32. $('.tableHeader').each(function(i){
  33. if (m < colCount){
  35. if (brow == 'mozilla'){
  36. $('#firstTd').css("width",$('.tableFirstCol').innerWidth());//for adjusting first td
  37. $(this).css('width',$('#table_div td:eq('+m+')').innerWidth());//for assigning width to table Header div
  38. }
  39. else if (brow == 'msie'){
  40. $('#firstTd').css("width",$('.tableFirstCol').width());
  41. $(this).css('width',$('#table_div td:eq('+m+')').width()-2);//In IE there is difference of 2 px
  42. }
  43. else if (brow == 'safari'){
  44. $('#firstTd').css("width",$('.tableFirstCol').width());
  45. $(this).css('width',$('#table_div td:eq('+m+')').width());
  46. }
  47. else {
  48. $('#firstTd').css("width",$('.tableFirstCol').width());
  49. $(this).css('width',$('#table_div td:eq('+m+')').innerWidth());
  50. }
  51. }
  52. m++;
  53. });
  55. $('.tableFirstCol').each(function(i){
  56. if(brow == 'mozilla'){
  57. $(this).css('height',$('#table_div td:eq('+colCount*n+')').outerHeight());//for providing height using scrollable table column height
  58. }
  59. else if(brow == 'msie'){
  60. $(this).css('height',$('#table_div td:eq('+colCount*n+')').innerHeight()-2);
  61. }
  62. else {
  63. $(this).css('height',$('#table_div td:eq('+colCount*n+')').height());
  64. }
  65. n++;
  66. });
  68. }
  70. //function to support scrolling of title and first column
  71. fnScroll = function(){
  72. $('#divHeader').scrollLeft($('#table_div').scrollLeft());
  73. $('#firstcol').scrollTop($('#table_div').scrollTop());
  74. }
  76. </script>
  77. </head>
  83. <body>
  84. <table cellspacing="0" cellpadding="0" border="0" >
  85. <tr>
  86. <td id="firstTd">
  87. </td>
  88. <td>
  89. <div id="divHeader" style="overflow:hidden;width:284px;">
  90. <table cellspacing="0" cellpadding="0" border="1" >
  91. <tr>
  92. <td>
  93. <div class="tableHeader">Title1</div>
  94. </td>
  95. <td>
  96. <div class="tableHeader">Title2</div>
  97. </td>
  98. <td>
  99. <div class="tableHeader">Title3</div>
  100. </td>
  101. <td>
  102. <div class="tableHeader">Title4</div>
  103. </td>
  104. <td>
  105. <div class="tableHeader">Title5</div>
  106. </td>
  107. </tr>
  108. </table>
  109. </div>
  110. </td>
  111. </tr>
  112. <tr>
  114. <td valign="top">
  115. <div id="firstcol" style="overflow: hidden;height:80px">
  116. <table width="200px" cellspacing="0" cellpadding="0" border="1" >
  117. <tr>
  118. <td class="tableFirstCol">First Col row1 </td>
  119. </tr>
  120. <tr>
  121. <td class="tableFirstCol">First Col row2</td>
  122. </tr>
  123. <tr>
  124. <td class="tableFirstCol">First Col row3</td>
  125. </tr>
  126. <tr>
  127. <td class="tableFirstCol">First Col row4</td>
  128. </tr>
  129. <tr>
  130. <td class="tableFirstCol">First Col row5</td>
  131. </tr>
  132. <tr>
  133. <td class="tableFirstCol">First Col row6</td>
  134. </tr>
  135. <tr>
  136. <td class="tableFirstCol">First Col row7</td>
  137. </tr>
  138. <tr>
  139. <td class="tableFirstCol">First Col row8</td>
  140. </tr>
  141. <tr>
  142. <td class="tableFirstCol">First Col row9</td>
  143. </tr>
  144. </table>
  145. </div>
  146. </td>
  148. <td valign="top">
  149. <div id="table_div" style="overflow: scroll;width:300px;height:100px;position:relative" onscroll="fnScroll()" >
  150. <table width="500px" cellspacing="0" cellpadding="0" border="1" >
  151. <tr id='firstTr'>
  152. <td>Row1Col1</td>
  153. <td>Row1Col2</td>
  154. <td>Row1Col3</td>
  155. <td>Row1Col4</td>
  156. <td>Row1Col5</td>
  157. </tr>
  158. <tr>
  159. <td>Row2Col1</td>
  160. <td>Row2Col2</td>
  161. <td>Row2Col3</td>
  162. <td>Row2Col4</td>
  163. <td>Row3Col5</td>
  164. </tr>
  165. <tr>
  166. <td>Row3Col1</td>
  167. <td>Row3Col2</td>
  168. <td>Row3Col3</td>
  169. <td>Row3Col4</td>
  170. <td>Row3Col5</td>
  171. </tr>
  172. <tr>
  173. <td>Row4Col1</td>
  174. <td>Row4Col2</td>
  175. <td>Row4Col3</td>
  176. <td>Row4Col4</td>
  177. <td>Row4Col5</td>
  178. </tr>
  179. <tr>
  180. <td>Row5Col1</td>
  181. <td>Row5Col2</td>
  182. <td>Row5Col3</td>
  183. <td>Row5Col4</td>
  184. <td>Row5Col5</td>
  185. </tr>
  186. <tr>
  187. <td>Row6Col1</td>
  188. <td>Row6Col2</td>
  189. <td>Row6Col3 is both wider and<br />taller than surrounding cells, yet<br />fixed elements still line up correctly</td>
  190. <td>Row6Col4</td>
  191. <td>Row6Col5</td>
  192. </tr>
  193. <tr>
  194. <td>Row7Col1</td>
  195. <td>Row7Col2</td>
  196. <td>Row7Col3</td>
  197. <td>Row7Col4</td>
  198. <td>Row7Col5</td>
  199. </tr>
  200. <tr>
  201. <td>Row8Col1</td>
  202. <td>Row8Col2</td>
  203. <td>Row8Col3</td>
  204. <td>Row8Col4</td>
  205. <td>Row8Col5</td>
  206. </tr>
  207. <tr>
  208. <td>Row9Col1</td>
  209. <td>Row9Col2</td>
  210. <td>Row9Col3</td>
  211. <td>Row9Col4</td>
  212. <td>Row9Col5</td>
  213. </tr>
  214. </table>
  215. </div>
  216. </td>
  217. </tr>
  218. </table>
  220. </body>
  222. </html>
comments powered by Disqus