时间戳

首页 > 解决方案 > 每行水平滚动 div

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

标签： phphtmlcss

解决方案

与其使用经典表格，不如尝试使用 div 并将您的 html 修改为 flex 或 grid。用网格或 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>

这是该场景的一个示例：https ://jsfiddle.net/qcc14hdk/

推荐阅读