每行水平滚动div

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;
}

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/