Posted By

COBOLdinosaur on 01/06/13

Tagged

table display properties scrollable fixed headings

Versions (?)

Fixed Heading Scrollable Table Simulation

/ Published in: CSS

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

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

Highlighted TextExpand

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;
                }

Report this snippet Tweet

Comment:

You need to login to post a comment.

Posted By

Tagged

Versions (?)

Fixed Heading Scrollable Table Simulation

Related snippets

Choose a language for easy browsing: