html - 你如何斑马条纹 rowspan 表？

Question

我的表格有 rowspan 单元格，如何应用条纹背景，以便将 rowspan 单元格的行视为一行，如下所示:

tbody tr:nth-child(odd) {
   background-color: #ccc;
}

https://jsfiddle.net/gtL0tL6f/

Answer 1

你可以用很多来构建你的表 喜欢:

<table>
  <tbody>
    <tr>
      <td rowspan=2>row a</td>
      <td>row b</td>
      <td>row c</td>
    <tr>
    <tr>
      <td>row b</td>
      <td>row c</td>
    <tr>
  <tbody>
  <tbody>
    <tr>
      <td rowspan=2>row b</td>
      <td>row a</td>
      <td>row b</td>
    <tr>
    <tr>
      <td>row c</td>
      <td>row d</td>
    <tr>
  <tbody>
</table>

你的 css 可能是

tbody:nth-child(odd) {
  background: #CCC;
}

就像这个片段中描述的那样: https://codepen.io/cimmanon/pen/KqoCs