html - 使模态内的 Bootstrap 表可滚动

Question

如何使 Bootstrap 表在带有固定标题的模态滚动中呈现？目前我的模态主体是可滚动的，这使得表头在滚动时消失。

代码

<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

你可以试试这个。

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