尝试在 HAML 中制作表格,我有以下内容:
%table
%tbody
%tr
%th{:rowspan => 2} Name
%th{:class => "leftBorderS", :colspan => 5} Monday
%th{:class => "leftBorderS", :colspan => 5} Tuesday
%th{:class => "leftBorderS", :colspan => 5} Wednesday
%th{:class => "leftBorderS", :colspan => 5} Thursday
%th{:class => "leftBorderS", :colspan => 5} Friday
%th{:class => "leftBorderS", :colspan => 5} Saturday
%tr
- 6.times do
%th{:class => "leftBorderS"} A
%th{:class => "leftBorderD"} B
%th{:class => "leftBorderD"} C
%th{:class => "leftBorderD"} D
%th{:class => "leftBorderD"} E
- @data.each do |row|
%tr
- row.each do |column|
%td{:class => "leftBorderD"}= column
CSS 类:
table {
border-collapse: collapse;
}
th {
border: 1px solid #ccc;
padding: 0.2em;
}
.weeklyReview .leftBorderS {
border-left: 1px solid black;
text-align: center;
}
.weeklyReview .leftBorderD {
border-left: 1px dotted orange;
}
.weeklyReview .rowGray {
background-color: gray;
}
.weeklyReview .rowWhite {
background-color: white;
}
Rails Controller 传递的示例数据:
@data = [["adam", 1, 1, 1, 1, 1, 2, 2, 2, 2, 2, 3, 3, 3, 3, 3, 4, 4, 4, 4, 4, 5, 5, 5, 5, 5], ["boy", 1, 1, 1, 1, 1, 2, 2, 2, 2, 2, 3, 3, 3, 3, 3, 4, 4, 4, 4, 4, 5, 5, 5, 5, 5], ["charles", 1, 1, 1, 1, 1, 2, 2, 2, 2, 2, 3, 3, 3, 3, 3, 4, 4, 4, 4, 4, 5, 5, 5, 5, 5], ["david", 1, 1, 1, 1, 1, 2, 2, 2, 2, 2, 3, 3, 3, 3, 3, 4, 4, 4, 4, 4, 5, 5, 5, 5, 5], ["echo", 1, 1, 1, 1, 1, 2, 2, 2, 2, 2, 3, 3, 3, 3, 3, 4, 4, 4, 4, 4, 5, 5, 5, 5, 5], ["foxtro", 1, 1, 1, 1, 1, 2, 2, 2, 2, 2, 3, 3, 3, 3, 3, 4, 4, 4, 4, 4, 5, 5, 5, 5, 5], ["gamma", 1, 1, 1, 1, 1, 2, 2, 2, 2, 2, 3, 3, 3, 3, 3, 4, 4, 4, 4, 4, 5, 5, 5, 5, 5], ["helio", 1, 1, 1, 1, 1, 2, 2, 2, 2, 2, 3, 3, 3, 3, 3, 4, 4, 4, 4, 4, 5, 5, 5, 5, 5], ["indigo", 1, 1, 1, 1, 1, 2, 2, 2, 2, 2, 3, 3, 3, 3, 3, 4, 4, 4, 4, 4, 5, 5, 5, 5, 5],]
问题出现在代码的最后一部分。我希望所有其他 %tr
的颜色都不同。目前默认是灰色的,但这仍然意味着每个其他的都必须是白色的,所以我只做了两个类来在两者之间切换)。此外,为了分隔日期,只有某些 %td
会有实线左边框,否则,它们会有虚线边框。
对于 HAML 标记:
- 你是如何逐行检查的?
- 如何仅将第
n
个实例应用于数据单元格?
我主要是在寻找语法,因为它可以应用于数据单元格、行、列或任何需要解析或单步执行的内容。
最佳答案
这似乎是一个 CSS 问题。
使用 nth-of-type
并忘记所有那些额外的类:
table {
background-color: salmon;
}
th {
background: salmon;
}
tr:nth-of-type(2n) {
background: salmon;
}
tr:nth-of-type(2n+1) {
background: lightblue;
}
你也可以用列来做:
td:nth-of-type(5n-3) {
color: white
}
关于html - 隔行 | Haml 表的第 N 列,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14008593/