Как заморозить столбец 1 и прокрутить другие столбцы и строки в html с полями php и sql

У меня есть следующая php сгенерированная таблица (рисунок из значений базы данных sql), в которой я хочу первый столбец (все имена пользователей) быть замороженный (фиксированный) пока пользователь может прокрутить горизонтально и «вправо» по странице, чтобы просмотреть оценки для каждого пользователя.

Я не могу понять, как это сделать с помощью смеси php и html. Кто-нибудь может предложить жизнеспособное решение, пожалуйста?

Изображение для иллюстрации ниже
(Я хочу, чтобы столбец имени пользователя (все строки) был исправлен) при прокрутке вправо — там будет еще много викторин)

PHP и HTML код

 <tbody>
<?php foreach(@$result as $record){?>
<tr>
<td><?php echo $record["username"];?></td>
<?php
$counter=0;

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>

ОБНОВИТЬ:

Благодаря полезному предложению, касающемуся CSS, ниже я попробовал следующее: он работает, но не совсем (испортил форматирование)

CSS

<style type="text/css">
.headcol {
position: absolute;
width: 5em;
left: 0;
top: auto;
border-top-width: 1px;
/*only relevant for first row*/
margin-top: -1px;
/*compensate for top border*/
}

.headcol:before {
content: 'Row ';
}

</style>

Добавил эту строку ниже:

<tbody>
<?php foreach(@$result as $record){?>
<tr>
<td><th class="headcol"><?php echo $record["username"];?></th></td>
<?php
$counter=0;

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>

вместо желаемого: