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

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

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

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

number of columns * column width

Посмотрите в действии здесь .

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