1

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コントローラーによって渡されるサンプルデータ：

@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に違う色にしたいと思います。現在、デフォルトは灰色ですが、それでも他のすべてが白でなければならないことを意味するので、2つのクラスを作成して2つを切り替えました）。また、日を区切るために、特定%tdのsのみが実線の左境界線を持ち、そうでない場合は破線の境界線を持ちます。

HAMLマークアップの場合：

  1. 1行おきにどのようにステップスルーしますか？
  2. nthインスタンスのみをデータセルに適用するにはどうすればよいですか？

私が持っているもの、そしてそれがどのように見えるべきか。

私は主に構文を探しています。これは、データセル、行、列、または解析やステップスルーが必要なものすべてに適用できるためです。

4

1 に答える 1

5

これは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
}
于 2012-12-23T04:37:17.850 に答える