修正了Thead;可滚动的Tbody~Righter Columns不对齐

Question

在阅读了许多关于使用scrollabe tbody修复了theader的帖子后，大多数答案都指向调整tbody来显示：block。但是，显示块使得我在更右侧的列在列的右侧具有偏斜的对齐。我正在处理动态数据，所以有时候我的表会用16列进行渲染，但有时最多可能有25列。我希望所有列都正确对齐，同时使用可滚动的tbody维护固定的thead。这是我的CSS：

table {
  overflow: hidden;
  width: 100%;
  height: 810px;
  table-layout: fixed;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
}

thead,
tbody {
  width: 100%;
}

tbody {
  flex: 1;
  overflow-y: scroll;
  width: 100%;
}

th {
  cursor: pointer;
}

th {
}

td {
  display: flex;
  justify-content: center;
}

td,
th {
  padding: 0;
}

tr {
  width: 100%;
  display: flex;
}

tr th {
  flex: 1;
}

tr td {
  flex: 1;
}

这是一个小的Codepen示例：https://codepen.io/anon/pen/xMmqxK

Codepen偏差不如我网站上的偏差那么突出，所以有点难以注意到。任何帮助将非常感激。如果我发布了截图，你可以更多地看到问题，但是，由于公司的环境，我不能。再次感谢。

Answer 1

这里的主要问题是<th>s是text-align:center但是<td>s是text-align:left。这就是每列中有更多空间时偏斜增加的原因。

最简单的解决方案是从padding-left: 10px中删除<tbody>（仅包含在你的CopePen中）并将<td>s设置为text-align: center。

如果你需要左对齐的<td>s那么你可以反过来并将你的<th>s设置为text-align:left。