Fixed Heading Scrollable Table Simulation

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


                                          The HTML: Table with fixed headings
            one
        two
         three
                  CELL one with a bunch of stuff in here screw it up        
         CELL two
          CELL three
    
             CELL one
         CELL two
         CELL three
     
             CELL one
         CELL two
         CELL three
    
              CELL one
         CELL two
         CELL three some extra stuff to see what happens        
     ... 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;
}