Использование CSS для создания вертикально ориентированной таблицы

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 , Они могут быть относительными (em,%) или фиксированными (px).

Это даст vertical-list-container, чтобы начать подчиняться правилу переполнения.

Редактировать

Так одни ширины не резать. Вы можете заставить его работать, добавив один дополнительный элемент в контейнер вертикального списка. Затем вы можете использовать некоторые Javascript, чтобы установить его ширину на нагрузку до:

number of columns * column width 

Посмотри in action here.

Из любопытства, почему вы не используете <table>? Это табличные данные и будут действительным (и более простым) способом сделать это.