Question

我们的项目需要在每行的开头左侧有一个带有标题的“表格”，然后每个对象都会添加到“表格”中的一列

我们也在努力保持项目AJAXy，因此我们需要为此网格编辑就地功能。我们正在使用ASP.NET MVC 2，所以我一直在使用PartialViews根据需要用可编辑的行替换表行，但这显然不适用于垂直方向的表。

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

当前CSS

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

HTML（更改为更容易理解）

<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更宽，那么会有一个水平滚动条。最终发生的事情是每个不适合的项目都被推到下面，这意味着它不符合“表格”标题

Answer 1

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

这将使vertical-list-container开始遵守溢出规则。

修改

所以宽度本身并没有削减它。您可以通过在vertical-list-container中添加一个额外元素来使其工作。然后你可以使用一些Javascript来加载它的宽度：

number of columns * column width

见in action here。

出于好奇，为什么不使用<table>？它是表格数据，是完成它的有效（和更简单）方法。

使用CSS创建面向垂直的表

1 个答案: