advanced code snippet search

Posted By

jsatt on 09/27/09


Tagged

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


Versions (?)

Who likes this?

1 person have marked this snippet as a favorite

alejandrosuch


Fixed Table Header Sample HTML

 / Published in: HTML
 

URL: http://jsatt.blogspot.com

This is a sample HTML layout to show best layout when using Scrollable Table with Frozen Headers Sample

Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported

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

Report this snippet  

You need to login to post a comment.