html ul文字滚动,纯CSS滚动UL LI表与固定标头

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

我的要求：

>使用表CSS(table,table-row,table-cell,table-header-group …)

>所有单元格必须是列表项(LI)

当表内容滚动时,必须修复标题

>当表列更改宽度时,应更改相应的标题宽度

目前我有HTML：

ID

Name

Description

Other details 1

Other details 2

1

2

3

4

5

1

2

3

4

5

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

}

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

是否有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代码.

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