Return to Snippet

Revision: 61689
at January 6, 2013 05:33 by COBOLdinosaur


Initial Code
The HTML:

<div class="htabl">
<div class="tabcap">Table with fixed headings</div>
    <div class="row">
        <div class="cell" title="Left">one</div>
        <div class="cell" title="Middle">two</div>

        <div class="cell" title="Right">three</div>
    </div>
</div>
<div id="wrapper">
<div class="tabl">
    <div class="row">
        <div class="cell"> 
 CELL one with a bunch of stuff in here screw it up
        </div>
        <div class="cell"> CELL two</div>

        <div class="cell"> CELL three</div>
    </div>
    <div class="row">
        <div class="cell" title="Left"> CELL one</div>
        <div class="cell" title="Middle"> CELL two</div>
        <div class="cell" title="Right"> CELL three</div>

    </div>
    <div class="row">
        <div class="cell"> CELL one</div>
        <div class="cell"> CELL two</div>
        <div class="cell"> CELL three</div>
    </div>

    <div class="row">
        <div class="cell"> CELL one</div>
        <div class="cell"> CELL two</div>
        <div class="cell">
 CELL three some extra stuff to see what happens
        </div>
    </div> ...
    
The CSS 
    
    .cell   {
            display:table-cell;
            border:1px solid black;
            padding:5px;
            border-radius:8px;
            vertical-align:middle;
        }
.row   {
                display:table-row
            } 
.tabcap    {
                    color:navy;
                    font-size:125%;
                    font-weight:bold;
                    display:table-caption;
                }
.htabl  {
            width:400px;
            display:table;
            margin:0px auto;
             padding-right:10px;
             border:2px solid red; 
             // this border is just for testing
             // remove for production
          }

.htabl .cell {
                            border:1px solid white;
                            border-radius:12px;
                            background-color:blue;
                            color:white;
                            font-size:1.5em;
                            text-align:center; 
                        }
#wrapper {
                    max-height:200px;
                    overflow-y:scroll;
                    overflow-x:hidden;
                    width:420px;
                    margin:auto;
                     padding-left:4px;
                    border:2px dashed black;
                   // this border is just for testing
                   // remove for production
                } 
.tabl {
            width:400px;           
            display:table;
            margin:0px auto;
            border:2px solid red;
            // this border is just for testing
            // remove for production
        } 
[title=Left]     {
                    width:110px;
               }
[title=Middle]     {
                    width:150px;
                   }
[title=Right]     {
                    width:130px;
                }

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

Initial Description
Uses the table display properties in div tags to merge the attributes of multiple tags.

Initial Title
Fixed Heading Scrollable Table Simulation

Initial Tags
table

Initial Language
CSS