我的要求：
>使用表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代码.
附：我对这种情况的思考越多,它看起来就像一个实用的,而不是语义问题.
解决方法
我在纯css中得到了这些正确的：
>使用表CSS(table,必须修复标题
最后一个要求我必须使用一些jquery.
无论如何我做的是创建两个< li class =“testRow”> for< div class =“testHeader”>.其中一个有一个id与css位置：固定
这个技巧完成了你的前3个要求.最后一个对css来说真的很棘手,所以我做的是添加jquery：
$(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);
}
希望它有所帮助！
编辑
每次添加新数据时都运行函数adjustHeader(),以便标题重新对齐.
这是DEMO
