html - 使模式内的引导表可滚动
问题描述
如何使用固定标题使在模态中呈现的引导表可滚动?目前我的模态体是可滚动的,这使得表格标题在滚动时消失。
代码
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<input type="text" id="market-search" onkeyup="marketSearch()" placeholder="Search for stock names..">
<i class="fa fa-times" data-dismiss="modal"></i>
</div>
<div class="modal-body">
<div class="card">
<div id="table" class="table-editable">
<table id="modal-table" class="sortable table table-bordered table-responsive-md table-hover">
<thead class="thead-dark">
<tr >
<th>Code</th>
<th>Name</th>
<th>LTP</th>
<th>Open Price</th>
<th>Previous Close</th>
<th>Low52</th>
<th>High52</th>
<th>Percentage (%)</th>
<th>Allocate</th>
</tr>
</thead>
<tbody id="allocate-table-body">
{% for stock in all_stocks %}
<tr id="stock_{{stock.code}}" class="stock-card" data-name="{{stock.name}}">
<td><a target="_blank" style="color:blue;" href="https://www.google.com/finance?q=NSE:{{ stock.code }}">{{stock.code}}</a></td>
<td>{{stock.name}}</td>
<td>{{stock.price}}</td>
<td>{{stock.open_price}}</td>
<td>{{stock.previous_close}}</td>
<td>{{stock.low52}}</td>
<td>{{stock.high52}}</td>
<td>
<input type="number" id="input_{{stock.code}}" class="stockme"/>
</td>
<td>
<a style="white-space:nowrap" href="#" class="btn btn-primary btn-success market-buy-button" onclick=insertRow("{{current_allocation}}","{{stock.code}}","{{stock.name|to_and}}","{{stock.price}}","{{stock.diff}}")>Allocate</a>
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
CSS
.modal-dialog,
.modal-content {
/* 100% of window height */
height: 95%;
}
.modal-body {
/* 100% = dialog height, 120px = header + footer */
overflow-y: scroll;
}
我也想减少行高。
这里的任何线索都是非常可观的。
解决方案
你可以试试这个。
#allocate-table-body {
max-height : 300px;
overflow-y: auto;
}
推荐阅读
- r - 如何使用多个变量或维度进行扩展
- javascript - 使用 server.js 和 proxy.config.json 使用 Protractor 模拟服务
- laravel - 雄辩的查询哪里和条件或哪里和不同的条件
- unity3d - 轮廓着色器统一类似于 Gizmo 编辑器
- php - ReflectionException:类 PermissionsTableSeeder 不存在
- unity3d - 私有接口下的属性总是返回零
- c# - Asp.Net Core 从 appsettings.json 获取 json 数组
- java - reduce() 方法如何与 Java 8 中的并行流一起工作?
- javascript - 赛普拉斯等待 xhr 日志记录
- r - 是否有以日期范围为条件镜像 EXCEL COUNTIFS 的 R 函数?