Tables Adjust Row Width For Th And Td

I got stuck on this table aligment in my my data inside the table does not align with the someone can help me on this? Just one thing I can't remove from this it is the height: c

Solution 1:

You have to make sure the header <thead> has the same width as the content <tbody>!

solution #1:

You can add the following to your CSS:

.table-scrollthead {
    display: block;
    width: calc(100% - 90px); /** -70px like content and -20px for scrollbar */
}

For this solution you have to remove the col-md-4 on your <th>.

demo:https://jsfiddle.net/wuuf5g87/1/

solution #2:

You can use the following CSS rules:

.table-scrolltbody {
    overflow-y: scroll;
    display: block;
    height: calc(100vh - 346px);
    width: 100%;
}
.table-scrollthead {
    display: block;
    width: calc(100% - 20px); /** -20px for scrollbar */
}

demo:https://jsfiddle.net/wuuf5g87/2/