背景颜色不适用于显示内容

Question

我正在尝试将border 和background-color 添加到我的表中，但没有得到应用。

我的表格的 CSS :-

table {
      width: 100%;
      display: grid;
      overflow: auto;
    }
    
      table thead,
    table tbody,
    table tr {
      display: contents;
    }

尝试应用的 CSS 不起作用

tbody tr:nth-child(odd) { 
      border: solid 1px #e2e2e2;
      background-color: #f4f4f4;
    }
    tbody tr:nth-child(even) { 
      border: solid 1px #e2e2e2;
      background-color: blue;
    }

请给我一个出路，因为我需要申请background-color。 我也试过申请。

tbody tr {
background-color: blue;
}

这也不行。

提前致谢。

Answer 1

尝试选择td：

table {
  width: 100%;
  display: grid;
  overflow: auto;
}
tbody tr:nth-child(odd) > td{ 
  border: solid 1px #e2e2e2;
  background-color: #f4f4f4;
}
tbody tr:nth-child(even) > td{ 
  border: solid 1px #e2e2e2;
  background-color: blue;
}
table thead,
table tbody,
table tr {
  display: contents;
 }

<table>
  <thead>
    <tr>
      <th>header</th>
      <th>header</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1st row</td>
      <td>1st row</td>
    </tr>
    <tr>
      <td>2nd row</td>
      <td>2nd row</td>
    </tr>
  </tbody>
</table>