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

Question

Open below link seems that TH and TD are not in same line. The reason might be because of the scroll bar. How to resolve this issue so that even with scroll TD and TH will in same line?

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

Have you tried my edited answer? – Steven B. Aug 04 '16 at 20:48 — Steven B., Aug 04 '16 at 20:48

score 1 · Answer 1 · edited May 23 '17 at 12:32

The scrollbar in the tbody is reducing his width, while theaddoesn't have one.

That's why 20% width in the thead doesn't match the 20% width in the tbody.

You could set a padding on the tr in the thead but i'm not sure it will be cross-browser...

You could also use this for the browsers supporting webkit (CanIUse) :

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

For Firefox, there is no way to custom it with CSS, you will have to deal with jQuery (see thirtydot's answer for more informations). There are librarie making good looking scrollbar : Custom Content Scroller

Steven B. · Accepted Answer · 2016-08-04T20:07:29.800

Getting the offset of the th, comparing it to the offset of the td, and then setting the margin-left property of the th as the difference of those two should work.

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 and TD are not in same line

2 Answers2