Advanced Search

Fixed Heading Scrollable Table Simulation

/ Published in: CSS
Save to your folder(s)
Uses the table display properties in div tags to merge the attributes of multiple tags.

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. The HTML:
  2.  
  3. <div class="htabl">
  4. <div class="tabcap">Table with fixed headings</div>
  5.     <div class="row">
  6.         <div class="cell" title="Left">one</div>
  7.         <div class="cell" title="Middle">two</div>
  8.  
  9.         <div class="cell" title="Right">three</div>
  10.     </div>
  11. </div>
  12. <div id="wrapper">
  13. <div class="tabl">
  14.     <div class="row">
  15.         <div class="cell"> 
  16.  CELL one with a bunch of stuff in here screw it up
  17.         </div>
  18.         <div class="cell"> CELL two</div>
  19.  
  20.         <div class="cell"> CELL three</div>
  21.     </div>
  22.     <div class="row">
  23.         <div class="cell" title="Left"> CELL one</div>
  24.         <div class="cell" title="Middle"> CELL two</div>
  25.         <div class="cell" title="Right"> CELL three</div>
  26.  
  27.     </div>
  28.     <div class="row">
  29.         <div class="cell"> CELL one</div>
  30.         <div class="cell"> CELL two</div>
  31.         <div class="cell"> CELL three</div>
  32.     </div>
  33.  
  34.     <div class="row">
  35.         <div class="cell"> CELL one</div>
  36.         <div class="cell"> CELL two</div>
  37.         <div class="cell">
  38.  CELL three some extra stuff to see what happens
  39.         </div>
  40.     </div> ...
  41.  
  42. The CSS 
  43.  
  44.     .cell   {
  45.             display:table-cell;
  46.             border:1px solid black;
  47.             padding:5px;
  48.             border-radius:8px;
  49.             vertical-align:middle;
  50.         }
  51. .row   {
  52.                 display:table-row
  53.             } 
  54. .tabcap    {
  55.                     color:navy;
  56.                     font-size:125%;
  57.                     font-weight:bold;
  58.                     display:table-caption;
  59.                 }
  60. .htabl  {
  61.             width:400px;
  62.             display:table;
  63.             margin:0px auto;
  64.              padding-right:10px;
  65.              border:2px solid red; 
  66.              // this border is just for testing
  67.              // remove for production
  68.           }
  69.  
  70. .htabl .cell {
  71.                             border:1px solid white;
  72.                             border-radius:12px;
  73.                             background-color:blue;
  74.                             color:white;
  75.                             font-size:1.5em;
  76.                             text-align:center; 
  77.                         }
  78. #wrapper {
  79.                     max-height:200px;
  80.                     overflow-y:scroll;
  81.                     overflow-x:hidden;
  82.                     width:420px;
  83.                     margin:auto;
  84.                      padding-left:4px;
  85.                     border:2px dashed black;
  86.                    // this border is just for testing
  87.                    // remove for production
  88.                 } 
  89. .tabl {
  90.             width:400px;           
  91.             display:table;
  92.             margin:0px auto;
  93.             border:2px solid red;
  94.             // this border is just for testing
  95.             // remove for production
  96.         } 
  97. [title=Left]     {
  98.                     width:110px;
  99.                }
  100. [title=Middle]     {
  101.                     width:150px;
  102.                    }
  103. [title=Right]     {
  104.                     width:130px;
  105.                 }

URL: http://coboldinosaur.com/pages/Fixed_Heading_Scrollable_Table.html

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.