Revision: 61689
Initial Code
Initial URL
Initial Description
Initial Title
Initial Tags
Initial Language
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