Table not resizing columns as per % in colgroup - html

Question

Can someone advise on why the columns aren't resizing according to their %s in colgroup?
PROBLEM: Make something like 50% first column 25% second column and third. While preserving display block on the tbody, such that we have scroll on the body not the whole table. SOLUTION: Leave in all the code like is below, but use td:nth-child property to manually set % width instead of using colgroup (because it required that display is not block but table-row-group).
I have tried using '3*','1*','1*' for the col width as well, to no avail. I think it must have to do something with the fact that I am placing the table inside a div container or due to display:block property, perhaps it has to be display: table. But when I do display: table, then table takes up only 50% of the container space and floats to left and columns are still of equal width. Thanks for any help!
EDIT: I have also tried style="width: 100%" on the table.
EDIT EDIT: removing display:block from .fixed_header thead tr and .fixed_header tbody fixes the issue for the header. Also, setting width:100% in .fixed_header th, .fixed_header td almost fixes it, it is a little bit misalligned.
.table-container {
position: absolute;
display: block;
height: 94%;
width: 100%;
margin-top: 10px;
padding: 10px;
top: 15px;
}
// https://codepen.io/GhostRider/pen/GHaFw
.style-2::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;
background-color: #F5F5F5;
}
.style-2::-webkit-scrollbar
{
width: 12px;
background-color: #F5F5F5;
}
.style-2::-webkit-scrollbar-thumb
{
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
background-color: #F4F7F7;
}
table, tbody {
width: 100%;
height: 100%;
position: relative;
display: inline-block;
table-layout: fixed;
}
.fixed_header{
width: 100%;
table-layout: fixed;
border-collapse: collapse;
}
.fixed_header tbody{
display:block;
width: 100%;
overflow-y: auto;
height: 90%;
}
.fixed_header thead tr {
display: block;
border-bottom: 1px solid black;
}
.fixed_header th, .fixed_header td {
padding: 5px;
text-align: left;
width: 200px;
}
<div class="table-container">
<table class="fixed_header">
<colgroup style="width: 100%;">
<col span="1" style="width: 50%;">
<col span="1" style="width: 25%;">
<col span="1" style="width: 25%;">
</colgroup>
<thead>
<tr>
<th>Factor</th>
<th>y_i</th>
<th>F_i</th>
</tr>
</thead>
<tbody class="style-2">
<tr>
<td>row 1-0</td>
<td>row 1-1</td>
<td>row 1-2</td>
</tr>
<tr>
<td>row 2-0</td>
<td>row 2-1</td>
<td>row 2-2</td>
</tr>
<tr>
<td>row 3-0</td>
<td>row 3-1</td>
<td>row 3-2</td>
</tr>
<tr>
<td>row 4-0</td>
<td>row 4-1</td>
<td>row 4-2</td>
</tr>
<tr>
<td>row 5-0</td>
<td>row 5-1</td>
<td>row 5-2</td>
</tr>
<tr>
<td>row 6-0</td>
<td>row 6-1</td>
<td>row 6-2</td>
</tr>
<tr>
<td>row 7-0</td>
<td>row 7-1</td>
<td>row 7-2</td>
</tr>
<tr>
<td>row 7-0</td>
<td>row 7-1</td>
<td>row 7-2</td>
</tr>
<tr>
<td>row 7-0</td>
<td>row 7-1</td>
<td>row 7-2</td>
</tr>
<tr>
<td>row 7-0</td>
<td>row 7-1</td>
<td>row 7-2</td>
</tr>
</tbody>
</table>
</div>

Answer 1

Removing the below classes solved the issue.
table, tbody {
width: 100%;
height: 100%;
position: relative;
display: inline-block;
table-layout: fixed;
}
.fixed_header tbody{
display:block;
width: 100%;
overflow-y: auto;
height: 90%;
}
.fixed_header thead tr {
display: block;
border-bottom: 1px solid black;
}
I see the default display table-row-group of the tbody has been replaced with display:inline-block . My guess is that these display properties seen below make elements behave like tables and their children and consequently apply table grouping rules on them. Fiddle here
display: table;
display: table-cell;
display: table-column;
display: table-colgroup;
display: table-header-group;
display: table-row-group;
display: table-footer-group;
display: table-row;
display: table-caption;

Answer 2

<table style="width: 100%">
<colgroup>
<col span="1" style="width: 50%;">
<col span="1" style="width: 25%;">
<col span="1" style="width: 25%;">
</colgroup>
<!-- Put <thead>, <tbody>, and <tr>'s here! -->
<tbody>
<tr>
<td style="background-color: #777">50%</td>
<td style="background-color: #aaa">25%</td>
<td style="background-color: #777">25%</td>
</tr>
<tr>
<td>row 1-0</td>
<td>row 1-1</td>
<td>row 1-2</td>
</tr>
<tr>
<td>row 2-0</td>
<td>row 2-1</td>
<td>row 2-2</td>
</tr>
<tr>
<td>row 3-0</td>
<td>row 3-1</td>
<td>row 3-2</td>
</tr>
<tr>
<td>row 4-0</td>
<td>row 4-1</td>
<td>row 4-2</td>
</tr>
<tr>
<td>row 5-0</td>
<td>row 5-1</td>
<td>row 5-2</td>
</tr>
<tr>
<td>row 6-0</td>
<td>row 6-1</td>
<td>row 6-2</td>
</tr>
<tr>
<td>row 7-0</td>
<td>row 7-1</td>
<td>row 7-2</td>
</tr>
<tr>
<td>row 7-0</td>
<td>row 7-1</td>
<td>row 7-2</td>
</tr>
<tr>
<td>row 7-0</td>
<td>row 7-1</td>
<td>row 7-2</td>
</tr>
<tr>
<td>row 7-0</td>
<td>row 7-1</td>
<td>row 7-2</td>
</tr>
</tbody>
Try this! I hope this help. Is working for me.

Answer 3

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<div class="table-container">
<table class="fixed_header" style="width: 100%;">
<thead>
<tr>
<th style="width: 50%;">Factor</th>
<th style="width: 25%;">y_i</th>
<th style="width: 25%;">F_i Factor </th>
</tr>
</thead>
<tbody class="style-2">
<tr>
<td>row 1-0</td>
<td>row 1-1</td>
<td>row 1-2</td>
</tr>
<tr>
<td>row 2-0</td>
<td>row 2-1</td>
<td>row 2-2</td>
</tr>
<tr>
<td>row 3-0</td>
<td>row 3-1</td>
<td>row 3-2</td>
</tr>
<tr>
<td>row 4-0</td>
<td>row 4-1</td>
<td>row 4-2</td>
</tr>
<tr>
<td>row 5-0</td>
<td>row 5-1</td>
<td>row 5-2</td>
</tr>
<tr>
<td>row 6-0</td>
<td>row 6-1</td>
<td>row 6-2</td>
</tr>
<tr>
<td>row 7-0</td>
<td>row 7-1</td>
<td>row 7-2</td>
</tr>
<tr>
<td>row 7-0</td>
<td>row 7-1</td>
<td>row 7-2</td>
</tr>
<tr>
<td>row 7-0</td>
<td>row 7-1</td>
<td>row 7-2</td>
</tr>
<tr>
<td>row 7-0</td>
<td>row 7-1</td>
<td>row 7-2</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>

Answer 4

Please add this CSS :
Is working for me
*{ text-align: left; }
table{ width: 100%; max-width: 600px; }