纯CSS滚动UL LI表与固定标头

我正在尝试使用固定标头实现纯CSS滚动UL-LI表.

我的要求：

>使用表CSS(table,table-row,table-cell,table-header-group …)
>所有单元格必须是列表项(LI)
当表内容滚动时,必须修复标题
>当表列更改宽度时,应更改相应的标题宽度

目前我有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>

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

小提琴在这里：
http://jsfiddle.net/ozrentk/QUqyu/1/

但！当我尝试使用position：absolute或fixed来固定标题的位置时,表就会崩溃.我尝试了几种技术,但无济于事.此外,如何使用纯表CSS执行此操作无所不知.

This was close,但不完全是我的要求.

是否有CSS大师可以帮助我？

编辑

现在,为什么我要把这个列表显示为表格呢？

在我的动态ASP.NET MVC驱动的站点中,我有很多地方可以将无序列表返回给浏览器.然后,浏览器将采用此标记并将其显示给阅读器.但是显示格式本身实际上可以依赖于上下文,例如用户显示相关的首选项或设备格式本身. CSS用于显示格式化,因为它应该是.最后,如果要使用一些display-light-n-magic-effect,那么应该使用jQuery和/或插件,并希望仅用于此.

你看,我希望我的服务器保持显示格式不可知.也就是说,我不希望我的服务器关心特定客户端希望他的显示器看起来如何.我不希望if-blocks在一个case中返回unordered-list-items而在另一个case中返回table-cells.当然我可以有两个返回点,一个返回ul / li / span格式,另一个返回table / tr / td,但这将违反DRY原则.

另一件事是我正在使用一个非常好的jQuery插件来显示表格数据,并且可以使用list-items,但不能使用表格标记.我决定坚持使用这个插件.因为我喜欢它,它很棒并支持我的网站应该工作的方式.

我希望这能解决问题.你看,使用一种范式可以与另一种范式形成对比.事实证明,我必须放弃通用表格数据语义来获得DRY代码.

附：我对这种情况的思考越多,它看起来就像一个实用的,而不是语义问题.

$(document).ready(function(e) {
    adjustHeader();
});

function adjustHeader(){
    //get width of the NOT fixed header spans
    var a = $("span#tid").width();
        b = $("span#tname").width();
        c = $("span#tdesc").width();
        d = $("span#tod1").width();
        e = $("span#tod2").width();

    //Change the width of the fixed header spans
    //with the other headers spans
    $("span#fid").width(a);
    $("span#fname").width(b);
    $("span#fdesc").width(c);
    $("span#fod1").width(d);
    $("span#fod2").width(e);
}