固定头;可滚动的 Tbody ~ 右列较少对齐

Question

在阅读了许多关于使用带有滚动 tbody 的固定 theader 的帖子后，大多数答案都指向调整 tbody 以显示：块。但是，显示块使我在右侧的列在列越向右时对齐。我正在处理动态数据，所以有时我的表格会呈现 16 列，但有时最多可能有 25 列。我希望所有列正确对齐，同时保持一个带有可滚动 tbody 的固定头。这是我的 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。这就是当每列有更多空间时，倾斜会增加的原因。

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

如果您需要将<td>s 左对齐，那么您可以执行相反的操作并将您的<th>s 设置为text-align:left。