HTML CSS , table TH 和 TD 不在同一行

Question

下面打开link好像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 中没有。

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

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

您也可以将其用于支持 webkit 的浏览器 (CanIUse) :

::-webkit-scrollbar { 
    display: none; 
}

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

Answer 2

获取th的偏移量，将其与td的偏移量进行比较，然后设置th的margin-left 属性因为这两者的区别应该有效。

Tested Demo:

// set id on table
var dataTable = document.getElementById("dataTable");
var tableHead = dataTable.getElementsByTagName("thead")[0];
var headRow = tableHead.getElementsByTagName("tr")[0];
var tds = document.querySelectorAll('#dataTable tbody td');
var ths = document.querySelectorAll('#dataTable thead th');
for(i=0;i<tds.length;i++){
    var offset=tds[i].offsetLeft- ths[i].offsetLeft;
    var thToSet = headRow.getElementsByTagName("th")[i];
    thToSet.style.marginLeft = offset + "px";
}

HTML CSS , table TH 和 TD 不在同一行

HTML CSS , table TH and TD are not in same line

html

css

css-tables

smart-table