gpt4 book ai didi

html - 向表格添加滚动条

转载 作者:行者123 更新时间:2023-11-28 09:36:06 25 4
gpt4 key购买 nike

我有一张有 thead 的 table 。

 <table style="width: 100%; height: 420px; min-width: 500px" class="table-bordered table-condensed table-striped">
<thead>
<tr>
<th>امکانات</th>
<th>قیمت </th>
<th>موجود </th>
<th>اطلاعات بیشتر</th>
</tr>
</thead>
<tbody>
@{
foreach (var product in Model.AllProduct)
{
<tr>
<td>@product.Title</td>
<td class="text-center">@product.Price.ToString("##,###")</td>
<td class="text-center">
@product.IsValid
</td>
<td class="text-center">
@product.Description
</td>

</tr>
}
}
</tbody>

我想给这个表格添加滚动条。

我添加了这个样式。

 <style>
tbody {
height: 400px;
overflow: auto;
display: block;
}

thead > tr {
position: relative;
display: inline-table;
}
</style>

它是向表格添加滚动条,但 th 的宽度未设置为列。

当我删除此样式时,th 大小就可以了。

http://jsfiddle.net/ArGorgin/rc2xkfrw/

enter image description here

最佳答案

围绕表格创建 div 元素并定义其高度,并为其设置 overflow: auto;。然后表格将是可滚动的并且标题列与内容位于相同的位置。这个解决方案有一个小问题,因为当你向下滚动时,标题也会滚动,如果不向上滚动,用户将无法看到它们。

关于html - 向表格添加滚动条,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25520619/

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