css3 - Pure CSS scrolling UL LI table with fixed header -

i'm trying implement pure css scrolling ul-li table fixed header.

my requirements:

• using table css (table, table-row, table-cell, table-header-group...)
• all cells have list items (li)
• header has fixed when table content scrolling
• when table column changes width, appropriate header width should changed

currently have html:

<ul class="testtable">     <div class="testheader">         <li class="testrow">             <span>id</span>             <span>name</span>             <span>description</span>             <span>other details 1</span>             <span>other details 2</span>         </li>     </div>     <div class="testbody">         <li class="testrow">             <span>1</span>             <span>2</span>             <span>3</span>             <span>4</span>             <span>5</span>         </li>         <li class="testrow">             <span>1</span>             <span>2</span>             <span>3</span>             <span>4</span>             <span>5</span>         </li>     </div> </ul> 

...and css...

.testtable {   display: table;   margin: 0px;   padding: 0px; }  .testrow {   display: table-row; }  .testrow > span {   list-style:none;   display: table-cell;   border: 1px solid #000;   padding: 2px 6px; }  .testheader {   display: table-header-group;   /*position: absolute;*/ }  .testheader span {   background-color: #ccc; }  .testbody {   display: table-row-group; } 

fiddle here: http://jsfiddle.net/ozrentk/quqyu/1/

but! moment try fix position of header using position: absolute or fixed, table falls apart. tried several techniques, no avail. also, there 0 none examples how using pure table css.

this close, not require.

is there css guru can me?

edit

now, why hell did want display list table?

in dynamic asp.net mvc driven site have number of places return unordered lists browser. browser take markup , display reader. display format can depend on context, users display-related preferences or device format itself. css used display formatting, should be. @ last, if there display-light-n-magic-effect used, jquery and/or plugin should used that, , only that.

you see, want server remain display-format agnostic. is, don't want server care how particular client want display like. don't want if-blocks return unordered-list-items in 1 case , table-cells in other. of course have 2 return points, 1 returns ul/li/span format , other returns table/tr/td, violating dry principle.

another thing i'm using nice jquery plugin displays tabular data , can fed list-items, not table markup. , decided stick plugin. because it, it's great , supports way site should work.

i hope sorts things out. see, using 1 paradigm can in contrast other. turns out have give away general-tabular-data-semantics have dry code.

p.s. more think situation, more looks pragmatic, not semantic problem.

you can try this: demo

i got these correct in pure css:

• using table css (table, table-row, table-cell, table-header-group...)
• all cells have list items (li)
• header has fixed when table content scrolling

the last requirement had use jquery.

anyway did create 2 <li class="testrow"> <div class="testheader">. 1 of them has id css position:fixed

that trick accomplishes first 3 requirements. last 1 tricky css alone did add jquery:

$(document).ready(function(e) {     adjustheader(); });  function adjustheader(){     //get width of not fixed header spans     var = $("span#tid").width();         b = $("span#tname").width();         c = $("span#tdesc").width();         d = $("span#tod1").width();         e = $("span#tod2").width();      //change width of fixed header spans     //with other headers spans     $("span#fid").width(a);     $("span#fname").width(b);     $("span#fdesc").width(c);     $("span#fod1").width(d);     $("span#fod2").width(e); } 

hope helped!

edit

run function adjustheader() everytime add new data headers realign.

here demo