添加grid-gap后表格nth-child斑马纹样式错乱的修复方法

直接给tbody加两列grid布局后，tr作为grid子项会按DOM顺序依次填充网格，最终排布顺序是「左列第1条、右列第1条、左列第2条、右列第2条……」。原本基于单个tr的全局奇偶判定的斑马纹规则，会把连续的DOM序号依次匹配颜色，最终出现同排的左右两个条目一灰一白的错乱效果，完全达不到同组条目同背景的预期。

额外问题：tbody脱离默认table布局流后，浏览器内置的表格默认样式会导致边距、间距出现不可控偏移，调试成本会大幅上升。

• 上移grid布局层级
  删掉之前给tbody加的grid相关代码，把两列布局的设定放在.table-wrapper外层容器上，避免破坏table的默认语义结构：

  .table-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 16px 24px; /* 分别设置行间距、列间距 */
  }
  

  给每个tr加内部grid布局，实现单条属性内部的弹性对齐：

  tr {
    display: grid;
    grid-template-columns: auto 1fr; /* 属性名按内容宽度自适应，剩余空间留给属性值 */
    gap: 0 12px;
    align-items: center;
  }
  

• 匹配两列布局修正斑马纹规则
  因为每两个连续的tr正好对应单列模式下的一整行，所以按每4个序号为一个循环块匹配背景色：

  /* 序号为1、2、5、6……的条目：对应原模式下的奇数行，使用#f8fafb浅灰背景 */
  .table-wrapper tr:nth-child(4n + 1),
  .table-wrapper tr:nth-child(4n + 2) {
    background: #f8fafb;
  }
  /* 序号为3、4、7、8……的条目：对应原模式下的偶数行，使用白色背景 */
  .table-wrapper tr:nth-child(4n + 3),
  .table-wrapper tr:nth-child(4n + 4) {
    background: #fff;
  }
  

• 实现属性值右对齐
  给属性值所在的td加对齐规则，即可实现每列属性值统一靠右侧排布：

  tr td:last-child {
    text-align: right;
  }
  

• 之前尝试调整nth-of-type选择器无效的原因：tbody内所有子元素均为tr时，nth-of-type的计数逻辑和nth-child完全一致，无法解决DOM顺序与网格位置的匹配错位问题
• 不需要给tr设置跨列规则，默认单条tr占一个网格单元格即可达到两列并排的效果
• 可以通过给tr加水平内边距优化阅读体验，不需要改动原有td的内边距设置

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