Небольшая ошибка в html / CSS форматировании для остановки первого столбца в сгенерированных PHP таблицах SQL

У меня есть ошибка, которую никто не может исправить, но я уверен, что это очень просто и, возможно, связано с CSS.

Я хочу, чтобы первый столбец (то есть имена пользователей) был заморожен / исправлен, чтобы пользователь мог прокручивать другие столбцы (тесты, которых много).

Теперь это работает, но расположение имени пользователя не синхронизировано с остальной таблицей.

Это выглядит так:

и это должно выглядеть так:

PHP и HTML код:

<?php  }elseif(isset($_POST['quiz']) && $_POST['quiz'] == "non" && $err == ""){ ?>

<div class="col-sm-12">
<div class="table-responsive">
<table class="table table-bordered table-striped table-condensed" id="table">

<thead>
<tr>
<td width="3%"></td>
<?php
$all_quizes = mysqli_query($con,"SELECT * FROM quizes ORDER BY FIELD(quiz_level, 'Beginner','Intermediate','Advanced'),quiz_name ASC");
$quizes = array();
while($my_rows = mysqli_fetch_array($all_quizes)){
array_push($quizes,$my_rows);
}
foreach($all_quizes as $record){
?>

<th width="30%"><?php echo $record['quiz_name']; ?></th>
<?php } ?>
</tr>
</thead>

<tbody>
<?php foreach(@$result as $record){?>
<tr>

<td class="headcol"><?php echo $record["username"];?></td>
<?php
$counter=0;
echo "&nbsp;&nbsp;&nbsp;";
while(mysqli_num_rows($all_quizes) > $counter){
$current_td = mysqli_query($con,"SELECT * FROM quiz_takers WHERE username='".$record["username"]."' AND quiz_id=".$quizes[$counter][0]." ORDER BY marks DESC");
$td = mysqli_fetch_array($current_td);

if($td['percentage'] == null){

echo "<td> ?</td>";
}else{
if(intval($td["percentage"]) >= 0 && intval($td["percentage"]) <= 30){
$color = 'red';
}elseif(intval($td["percentage"]) > 30 && intval($td["percentage"]) <= 70){
$color = '#ffbf00';
}elseif(intval($td["percentage"]) <= 30){

}else{
$color = 'green';
}
echo "<td style='color:".$color."'>".round($td["percentage"],2)."%</td>";

}

$counter++;
}
/*foreach($current_td as $td){
echo $counter." ".$td['username'] . " - ".$quizes[$counter]['3']."<br>";
if($quizes[$counter]['0'] == $td['quiz_id']){
?>
<td><?php echo $td["percentage"];?></td>
<?php  } $counter++;}*/ ?>
</tr>
<?php  } ?></tbody></table>
</div>
</div>

Текущий css:

<style>.headcol {

position:absolute;
height:100px;

width: 5em;
left: -10;overflow-x: scroll;
margin-left: 5em;

padding: 0;

top: 2;
border-top-width: -2px;
/*only relevant for first row*/
margin-top: -90px;
/*compensate for top border*/
}</style>

Может кто-нибудь предложить решение или исправить?