HTML列表背景色偏移,使用动态列表呈现交替背景颜色的两列表格，HTML标记问题...

我想创建一个交替显示背景颜色行的表，其中每行有两列。此外，表格中的第一行用作标题，并横跨两列。使用动态列表呈现交替背景颜色的两列表格，HTML标记问题

我觉得我已经接近达到预期的结果，但两列列表无法正确呈现。目前，三个项目列表中的第二个项目呈现在第二列中，并显示在项目1和3之间。此外，行的背景颜色不会在两列之间延伸，而是直接向下延伸到其下方的行中。

请查看附件截图。

期望结果

.html.haml

%div.mobileLandingPageTable

%table

%tr

%td{:colspan => "2"}

List

- @list.each do |company|

%tr

%td{:rowspan => "2"}

= company.company_name

common.sass

.mobileLandingPageTable

margin: 0px

padding: 0px

width: 90%

.mobileLandingPageTable table

width: 90%

height: 100%

margin: 0px

padding: 0px

border: 1px solid #a8a8a8

border-bottom-right-radius: 0px

border-top-left-radius: 0px

border-top-right-radius: 0px

border-bottom-left-radius: 0px

.mobileLandingPageTable tr:nth-child(odd)

background-color: #ffffff

.mobileLandingPageTable tr:nth-child(even)

background-color: #d6d0cb

.mobileLandingPageTable td

border: 1px solid #a8a8a8

border-width: 0px 1px 1px 0px

text-align: left

padding: 7px

font-size: 10px

font-family: Arial

font-weight: normal

color: #000000

.mobileLandingPageTable tr:last-child td

border-width: 0px 1px 0px 0px

.mobileLandingPageTable tr td:last-child

border-width: 0px 0px 1px 0px

.mobileLandingPageTable tr:last-child td:last-child

border-width: 0px 0px 0px 0px

.mobileLandingPageTable tr:first-child td

background-color: #002F87

border: 0px solid #a8a8a8

text-align: left

border-width: 0px 0px 1px 1px

font-size: 12px

font-family: Arial

color: #ffffff

.mobileLandingPageTable tr:first-child td:first-child

border-width: 0px 0px 1px 0px

.mobileLandingPageTable tr:first-child td:last-child

border-width: 0px 0px 1px 1px

UPDATE

我加修饰的HAML，但仍努力让这些行只能有两列。如果行已经跨越两列，如何添加逻辑以创建新行？

%div.mobileLandingPageTable

%table

%tr

%td{:colspan => "2"}

List

%tr

- @list.each do |company|

%td{:colspan => "1"}

= company.company_name

此修改现在有一行，每列有一列。我很困惑，因为我可以放置哪些逻辑，在行中已经存在两个对象后自动创建一个新行。

2014-10-09

Smooth

+0

你明白什么是rowspan，不是吗？这是一个纯粹的标记问题，不涉及Sass/CSS。 –

2014-10-09 15:35:40

+0

我以为跨越了两列？标记中的内容是什么？ –

2014-10-09 17:46:12

+1

为什么* row * span会跨越多个*列*？你认为* col * span是什么呢？ –

2014-10-09 17:50:22