Horizontal scroll div per row - php

Question

i am trying to make a table which has an individual horizontal scroll per table row which is dynamic. my code only works for the whole table itself but not the individual rows.
<table class="table-mainprojects">
<tr>
<th>Date Disbursed:(YYYY-MM-DD)</th>
<th>Disbursed<br>Project<br>Fund<br>(PHP)</th>
</tr>
while($row = mysqli_fetch_assoc($result)){?>
<div class="horizontal">
<tr>
<td><?php echo "$row[date_disbursed]"; ?><br/> </td>
<td><?php echo number_format($row['cost_disbursed'], 2); ?> <br/>
</td>
<input type="hidden" name="id" id="hiddenField" value="<?php echo
"$row[id]";?>" />
</tr>
</div>
<?php } ?>
</table>
CSS
.table-mainprojects {
display: block;
white-space: nowrap;
overflow: auto;
}
.table-mainprojects > .horizontal {
display: block;
overflow: auto;
white-space: nowrap;
}

Answer 1

Instead of using a classic table, maybe try using divs and revise your html as a flex or grid. It's easy enough to make a table out of a grid or flex:
<style>
.table > div.row {
display: grid;
grid-template-columns: auto auto 200px 200px;
overflow: auto;
max-width: 300px;
}
div.row div {
padding: 10px;
}
</style>
<div class="table">
<div class="row">
<div>one</div>
<div>two</div>
<div>three</div>
<div>four</div>
</div>
<div class="row">
<div>one</div>
<div>two</div>
<div>three</div>
<div>four</div>
</div>
</div>
Here is an example of that scenario: https://jsfiddle.net/qcc14hdk/