使用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創建垂直定向表

回答

相關問題