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执行此操作，无所不知。

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代码。

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

Answer 1

只要您在position: absolute上指定position: fixed或.testHeader，就会设置display: block覆盖display: table-header-group。

See this thread for details

Answer 2

您可以尝试：DEMO

我在纯css中得到了正确的答案：

使用表CSS（table，table-row，table-cell，table-header-group ...）
所有单元格必须是列表项（LI）
标题

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

无论如何，我所做的是为<li class="testRow">创建两个<div class="testHeader">。其中一个人的id为position: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

Answer 3

我相信我已经通过创建第二个标题部分解决了这个问题。首先，我复制了“testHeader”html：

    <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="secondHeader">
        <li class="testRow">
            <span>ID</span>
            <span>Name</span>
            <span>Description</span>
            <span>Other details 1</span>
            <span>Other details 2</span>
        </li>
    </div>

请注意，新的“secondHeader”有一个新类。此类设置为绝对位置。

.secondHeader {
  display: table-header-group;
  position: fixed;
  top: 0px;
}

然后将原始标题（使表格显示其结构）设置为隐藏可见性。

.testHeader {
  display: table-header-group;
  visibility: hidden;
}

现在，您应该将一个列表显示为一个表格，并在您调整大小时使用固定的标题元素保持原位。我将您的小提琴更新为demo。

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

3 个答案: