advanced code snippet search

Posted By

jsatt on 09/27/09


Tagged

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


Versions (?)


Advertising

Website Promotion DIRECTORY is a crucial factor for all websites that need to gain better organic search engine rankings and increase website traffic.
Submitting your website as part of your Web Promotion strategy to our SEO friendly and high traffic Business Directory for review is an excellent way to gain a valuable backlink and increase your websites visibility online.

Submit Site


Who likes this?

1 person has 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.

Download royalty free graphics