8

我正在尝试实现一个带有固定标题的纯 CSS 滚动 UL-LI 表。

我的要求：

  • 使用表格 CSS（表格、表格行、表格单元格、表格标题组...）
  • 所有单元格都必须是列表项（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: absoluteor来固定标题的位置时fixed，表格就会分崩离析。我尝试了几种技术，但无济于事。此外，关于如何使用纯表格 CSS 执行此操作的示例几乎为零。

这很接近，但不完全符合我的要求。

有可以帮助我的 CSS 大师吗？

编辑

现在，我到底为什么要将此列表显示为表格？

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

你看，我希望我的服务器保持与显示格式无关。也就是说，我不希望我的服务器关心特定客户端希望他的显示看起来如何。我不希望 if-blocks 在一种情况下返回 unordered-list-items 而在另一种情况下返回表格单元格。当然我可以有两个返回点，一个返回 ul/li/span 格式，另一个返回 table/tr/td，但这违反了 DRY 原则。

另一件事是我正在使用一个非常好的 jQuery 插件，它显示表格数据并且可以输入列表项，但不能输入表格标记。我决定坚持使用插件。因为我喜欢它，它很棒并且支持我的网站的工作方式。

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

PS 越想这种情况，越是看起来是务实的问题，而不是语义的问题。

4

3 回答 3

5

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

有关详细信息，请参阅此线程。

于 2013-07-31T14:51:30.517 回答
5

你可以试试这个：DEMO

我在纯CSS中得到了这些正确的：

  • 使用表格 CSS（表格、表格行、表格单元格、表格标题组...）
  • 所有单元格都必须是列表项（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()，以便标题重新对齐。

这是一个演示

于 2013-08-13T15:11:33.677 回答
2

我相信我已经通过创建第二个标题部分解决了这个问题。首先，我复制了“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;
}

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

于 2013-08-17T12:38:41.013 回答