Fixed Thead; Scrollable Tbody ~ Righter Columns Less Aligned - html

Question

After reading many posts about having a fixed theader with a scrollabe tbody, most answers point to adjusting the tbody to display: block. However, display block makes my columns on the righter side have a skewed alignment the further right the column goes. I am dealing with dynamic data so sometimes my table is rendered with 16 columns, but sometimes it could be up to 25 columns. I want all the columns aligned properly, while maintaining a fixed thead with a scrollable tbody. Here is my 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;
}
Here is a small Codepen example: https://codepen.io/anon/pen/xMmqxK
The Codepen skew is less prominent than the skew on my website, so it's a bit hard to notice. Any help would be much appreciated. If I posted a screenshot you would be able to see the problem more, however, I cannot due to a corporate envrionment. Thanks again.

Answer 1

The main problem here is that the <th>s are text-align:center but the <td>s are text-align:left. This is why the skew increase when there is more space in each column.
Easiest solution is to remove padding-left: 10px from <tbody> (only included in your CopePen) and set <td>s to text-align: center.
If you need to have left-aligned <td>s then you can do the reverse and set your <th>s to text-align:left.