滚动条不对齐：HTML表格，包含固定标题，可滚动的tbody和流体列宽

Question

我想使用纯CSS制作一个带有固定标题，可滚动的tbody和流体列宽的HTML表。

我制作了thead和tbody display: block并将固定列宽添加到th和td，但第一列需要占用全部可用宽度。

table {
  width: 100%;
  border-collapse: collapse;

  td:nth-child(1), th:nth-child(1) { width: 100%; }
  td:nth-child(2), th:nth-child(2) { min-width: 100px; }
  td:nth-child(3), th:nth-child(3) { min-width: 100px; }

  thead {
    display: block;
  }
  tbody {
    display: block;
    overflow: auto;
    width: 100%;
    height: 300px;
  }
}

除滚动条未对齐问题外，一切正常。滚动条通过某些像素将内容推向左侧，这些像素在浏览器中不固定。

我想知道是否可以通过一些CSS调整来解决它？

这是完整的示例：https://codepen.io/anon/pen/qqVOON/