使用CSS创建垂直定向表

我们的项目需要在每一行的开头左侧有一个标题为“表”，然后每个对象将被添加到“表”中的一列中使用CSS创建垂直定向表

我们也试图保留项目AJAXy，所以我们需要为这个网格编辑适当的功能。我们使用的是ASP.NET MVC 2，因此我一直使用PartialViews来根据需要用可编辑的行替换表行，但这对于垂直方向的表格显然不起作用。

我尝试使用无序列表设置它并将它们浮动，但我的问题是它们似乎不想遵守溢出css标记。

当前CSS

.vertical-list-container {float:left; overflow-x:scroll} 
.vertical-list {float-left;}

HTML（改变，使其easer跟随）

<ul class="vertical-list" id="table-header"> 
    <li>Id</li> 
    <li>Name</li> 
    <li>Address</li> 
</ul> 
<div class="vertical-list-container"> 
    <ul class="vertical-list"> 
    <li>1</li> 
    <li>John Doe</li> 
    <li>123 Address Lane</li> 
    </ul> 
    <ul class="vertical-list"> 
    <li>2</li> 
    <li>Jane Doe</li> 
    <li>456 Another Road</li> 
    </ul> 
</div>

什么是预期的是，如果两个vertical-lists结束了宽于vertical-list-container那么就是一个水平滚动条。但是，最终发生的是每个不适合的项目被压低，这意味着它不与“表格”标题对齐。

来源

2010-08-02 Andrew Burgess

您需要为vertical-list-container和vertical-list容器添加明确的宽度声明。这些可以是相对（em，％）或固定（px）。

这将使vertical-list-container开始服从溢出规则。

编辑

所以仅在宽度不剪。您可以通过在vertical-list-container中添加一个额外的元素来使其工作。然后，您可以使用一些Javascript将其宽度设置为：

number of columns * column width

查看它in action here。

出于好奇，为什么不使用<table>这个？它是表格数据，并且是完成它的有效（并且更容易）的方式。

来源

2010-08-02 20:58:48 Pat

我试过这个，但它似乎仍然没有工作。每个列表只是被推到页面的下方 – 2010-08-02 21:00:37

嗯，你是对的 - 我玩了它，找到了一个办法。详情请参阅我的编辑。 – Pat 2010-08-02 21:24:49

+1 *它是表格数据... * – 2010-08-02 21:30:37

使用CSS创建垂直定向表

回答

相关问题