Question

如何使带有固定标头的模式内滚动显示的引导表？目前，我的模式主体是可滚动的，这使表标题在滚动时消失了。

代码

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

我也想减小行高。

这里的任何线索都是很有意义的。

Answer 1

您可以使用位置粘性和行高。

#modal-table tr {
   line-height: 10px;
}
#table {
    overflow: auto;
    max-height: 300px;
    position: relative;
}
div.card{
    position: relative;
}
#modal-table th {
    position: sticky;
    top: 0;
    z-index: 1000;
}

这项工作吗？在这种情况下，位置粘性仅在垂直方向起作用。

Answer 2

您可以尝试一下。

#allocate-table-body {
max-height : 300px;
overflow-y: auto;
}

Answer 3

如果我理解您的问题，那么您只希望模态的主体可滚动。如果是这样的话，我想你应该看看 Bootstrap table

this是使用Bootstrap table的模式表的示例 https://examples.bootstrap-table.com/#welcomes/modal-table.html

希望有帮助

使引导表在模式下可滚动

3 个答案: