php - 每行水平滚动div

我正在尝试制作一个表格，其中每个表格行都有一个单独的水平滚动，这是动态的。我的代码仅适用于整个表本身，而不适用于单个行。

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

最佳答案

与其使用经典表格，不如尝试使用div并将HTML修改为flex或grid。可以很容易地使表格脱离网格或弯曲：

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

这是这种情况的示例：https://jsfiddle.net/qcc14hdk/

关于php - 每行水平滚动div，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/50654080/