使用CSS创建垂直方向的表

我们的项目需要有一个“表”,在每一行的开头,左边有标题,然后每个对象将被添加到“表”中的一列

我试着使用无序列表设置它并浮动它们,但我的问题是它们似乎不想遵守溢出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 然后会有一个水平滚动条。但最终发生的是,每一个不合适的项目都会被下推到下面,这意味着它不会与“表”标题对齐