设置display: contents后表格background-color、border样式不生效如何解决？

你为table tr设置了display: contents属性，该属性会让元素本身不生成独立的渲染盒子，所有附着在tr节点上的背景、边框样式都会失去承载容器，因此直接给tr设置样式不会生效。

方案1：移除display: contents配置（操作最简单） #

如果没有必须使用Grid布局实现表格的强需求，直接删除table thead, table tbody, table tr的display: contents配置，恢复表格元素默认的渲染规则，你编写的tr样式即可直接生效。
调整后的基础表格CSS如下：

table {
  width: 100%;
  overflow: auto;
  border-collapse: collapse; /* 合并相邻边框，避免出现重复线条 */
}

方案2：保留Grid布局，把样式挂载到单元格上 #

如果需要保留现有的Grid布局逻辑，保持display: contents配置不变，把奇偶行的样式作用到对应行的td/th单元格上即可：

/* 奇数行样式 */
tbody tr:nth-child(odd) td,
tbody tr:nth-child(odd) th {
  border: solid 1px #e2e2e2;
  background-color: #f4f4f4;
}
/* 偶数行样式 */
tbody tr:nth-child(even) td,
tbody tr:nth-child(even) th {
  border: solid 1px #e2e2e2;
  background-color: blue;
}

如果出现边框重叠变粗的问题，可以给table新增gap: 0配置消除Grid单元格间隙，再针对性去掉相邻单元格的重复边框即可。

内容的提问来源于stack exchange，提问作者Enigmatic