Utilisation de CSS pour créer une table orientée verticalement

Question

Notre projet doit avoir une "table" avec des en-têtes sur le côté gauche, au début de chaque ligne, puis chaque objet sera ajouté à une colonne dans la "table"

nous essayons aussi de garder le projet AJAXy, donc nous devons avoir modifier en fonction de place pour cette grille. Nous utilisons ASP.NET MVC 2, donc j'ai utilisé PartialViews pour remplacer les lignes de table avec des lignes modifiables, mais cela ne fonctionnera évidemment pas pour une table orientée verticalement.

J'ai essayé sa mise en place en utilisant les listes à puces et les flottants, mais mon problème est qu'ils ne semblent pas vouloir obéir à la balise de débordement css.

CSS actuel

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

HTML (modifié pour le rendre easer à suivre)

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

Ce qui est prévu est que si les deux extrémités vertical-lists jusqu'à plus large que vertical-list-container alors il y aurait être une barre de défilement horizontale. Ce qui finit par arriver, c'est que chaque élément qui ne tient pas est enfoncé, ce qui signifie qu'il ne s'aligne pas avec les en-têtes "table"

Answer 1

Vous devez ajouter une déclaration de largeur explicite à vos conteneurs vertical-list-container et vertical-list . Ceux-ci peuvent être relatifs (em,%) ou fixes (px).

qui va faire le vertical-list-container pour commencer obéir à la règle de débordement.

Modifier

Alors ne coupe pas les seules largeurs elle. Vous pouvez le faire fonctionner en ajoutant un élément supplémentaire dans le conteneur vertical-list. Ensuite, vous pouvez utiliser un Javascript pour définir sa largeur sur la charge à:

number of columns * column width 

Voir ce in action here.

Par curiosité, pourquoi ne vous utilisez un <table> pour cela? Ce sont des données tabulaires et seraient un moyen valide (et plus facile) de le faire.