Width for table columns will not set - html

Question

If you look at all of my <th> tags in the <thead> tag in the table, you can see if each <th> has its own class: col1, col2, col3 and col4.
I am trying to set a max and min width for each of those classes, the problem is that it is not setting the width at all. If set the width using percentage then it doesn't work, but it does work using px, but I want to use percentage, so why is it not setting the width?
Below is table code:
<div id="tableWrapper">
<div id="tableScroll">
<table id="qandatbl" align="center">
<thead>
<tr>
<th class="col2">Question No</th>
<th class="col4">Question</th>
<th class="col2">Option Type</th>
<th class="col1">Duration</th>
<th class="col2">Weight(%)</th>
<th class="col1">Answer</th>
<th class="col3">Video</th>
<th class="col4">Audio</th>
<th class="col3">Image</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</div>
</div>
Below is css;
#qandatbl{
font-size:14px;
border-collapse:collapse;
text-align:center;
margin-left:auto;
margin-right:auto;
}
.col1{
background-color:#FCF6CF;
max-width:7%;
min-width:7%;
border: 1px solid black;
}
.col2{
background-color:#FEFEF2;
max-width:7%;
min-width:7%;
border: 1px solid black;
}
.col3{
background-color:#FEFEF2;
max-width:16%;
min-width:16%;
border: 1px solid black;
}
.col4{
background-color:#FCF6CF;
max-width:16%;
min-width:16%;
border: 1px solid black;
}
#tableWrapper {
position:relative;
}
#tableScroll {
height:300px;
overflow:auto;
margin-top:20px;
}
#tableWrapper thead tr {
position:absolute;
top:-24px;
}

Answer 1

1- set a width for the table
2- adjust your percentages so that their sum is 100% (taking into account the number of times each type of column appears, which seems to be twice each).