gpt4 book ai didi

php - 每行水平滚动 div

转载 作者:太空宇宙 更新时间:2023-11-04 07:16:51 25 4
gpt4 key购买 nike

我正在尝试制作一个表格,每个表格行都有一个单独的水平滚动条,这是动态的。我的代码仅适用于整个表格本身,但不适用于个别行。 enter image description here

<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 或网格。用网格或 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/

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

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com