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

Question

我正在尝试使用固定标头实现纯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执行此操作无所不知.

这很接近,但不完全符合我的要求.

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

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

Answer 1

只要您指定position: absolute或position: fixed打开.testHeader,它就会设置display: block哪些覆盖display: table-header-group.

有关详情,请参阅此主题.

Answer 2

你可以试试这个:DEMO

我在纯css中得到了这些正确的:

• 使用表CSS(table,table-row,table-cell,table-header-group ...)
• 所有单元格都必须是列表项(LI)
• 当表内容滚动时,必须修复标头

最后一个要求我必须使用一些jquery.

反正我所做的就是创建两个<li class="testRow">的<div class="testHeader">.其中一个有css的idposition:fixed

这个技巧完成了你的前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