HTML CSS，表格TH和TD不在同一行

Question

打开下面的链接似乎TH和TD不在同一行。原因可能是因为滚动条。如何解决这个问题，即使滚动TD和TH也在同一行？

table {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    height: 500px; /* this can vary */
}

https://plnkr.co/edit/fcdXKE?p=preview

Answer 1

tbody中的滚动条缩小了宽度，而thead则没有。{/ p>

这就是为什么thead中20％的宽度与tbody中的20％宽度不匹配。

您可以在tr的{​​{1}}上设置填充，但我不确定它是否会跨浏览器...

您也可以将此用于支持webkit的浏览器（CanIUse）：

thead

对于Firefox，无法使用CSS自定义它，您将不得不处理jQuery（有关更多信息，请参阅thirtydot的答案）。 有图书馆制作漂亮的滚动条：Custom Content Scroller

Answer 2

获取th的偏移量，将其与td的偏移量进行比较，然后将margin-left的{​​{1}}属性设置为这两者的差异应该工作。

MySQL docs：

th