是否可以在Grid.js中指定tr样式？

Question

对Grid.js来说是新手，而不是css专家。

我正在尝试设计替代行的样式，这似乎是一种常见的用例，应该足够简单以实现，但我似乎无法达到1基数。

看来我甚至不能将简单的样式应用于tr元素。文档中没有显示tr样式受到支持，无论是使用文本还是样式classNames。

  columns: ["Name", "Email", "Phone Number"],
  data: [
    ["John", "john@example.com", "(353) 01 222 3333"],
    ["Mark", "mark@gmail.com", "(01) 22 888 4444"],
    ["Eoin", "eoin@gmail.com", "0097 22 654 00033"],
    ["Sarah", "sarahcdd@gmail.com", "+322 876 1233"],
    ["Afshin", "afshin@mail.com", "(353) 22 87 8356"]
  ],
  style: {
    tr: {
      'background-color': '#69c'
    }
  }
}).render(document.getElementById("wrapper"));

如果我不能得到一个简单的工作风格，就没有希望让它发挥作用：

tr:nth-child(even) {
   background-color: Lightgreen;
}

Answer 1

原来，设计交替行的样式并不难。这一样本有助于：

https://codesandbox.io/s/gridjs-bpf9g?file=/src/styles.css:0-57

没有必要包括样式:类。css tr选择器自行工作。

new gridjs.Grid({
  columns: ["Name", "Email", "Phone Number"],
  data: [
    ["John", "john@example.com", "(353) 01 222 3333"],
    ["Mark", "mark@gmail.com", "(01) 22 888 4444"],
    ["Eoin", "eoin@gmail.com", "0097 22 654 00033"],
    ["Sarah", "sarahcdd@gmail.com", "+322 876 1233"],
    ["Afshin", "afshin@mail.com", "(353) 22 87 8356"]
  ]
}).render(document.getElementById("wrapper"));

​

/* styles.css */

tr:nth-of-type(even) td {
   background: #fff;
}

tr:nth-of-type(odd) td {
   background: #fea;
}