Using CSS to Create Vertically Oriented Table

Question

Our project needs to have a "table" with headers on the left hand side, at the beginning of each row, and then each object will be added to a column in the "table"

We also are trying to keep the project AJAXy, so we need to have edit in place functionality for this grid. We're using ASP.NET MVC 2, so I've been using PartialViews to replace table rows with editable rows as needed, but that obviously won't work for a vertically oriented table.

I tried setting it up using unordered lists and floating them, but my problem is that they don't seem to want to obey the overflow css tag.

Current CSS

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

HTML (changed to make it easer to follow)

<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>

What's expected is that if the two vertical-lists end up wider than vertical-list-container then there would be a horizontal scroll bar. What ends up happening though is each item that doesn't fit gets pushed down below, which means it doesn't line up with the "table" headers

Answer 1

You need to add an explicit width declaration to your vertical-list-container and vertical-list containers. These can be relative (em, %) or fixed (px).

That will get the vertical-list-container to start obeying the overflow rule.

Edit

So the widths alone don't cut it. You can get it to work by adding one extra element inside the vertical-list-container. Then you can use some Javascript to set its width on load to:

number of columns * column width

See it in action here.

Out of curiosity, why aren't you using a <table> for this? It's tabular data and would be a valid (and easier) way to get it done.