html - 降低 html 表格高度和过度滚动 - HTML

Question

我有这个表格的模态形式。该表正在填充大量数据，但我不想分页。相反，我想以模式形式降低表格的高度并为表格添加溢出。下面是我的代码，但它不起作用。

请问我该如何实现？

CSS

 #table{
     height:20px;
     overflow:scroll;
 }

HTML

 <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">

      <form method="post" action="#" >
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Select Persons</h4>
        </div>
        <div class="modal-body">
        <input type="hidden" name="_token" value="{!! csrf_token() !!}">
        <div class="row">
        <div class="col-md-12">
                <div class="box-body">    
    <table  class="table" id="table"> 
    <thead> 
        <tr>
         <th>Name</th>
        </tr>

</thead>
<tbody >
 @foreach($people as $person)
<tr id="{{$person->id}}">
<td>{!! $person->name !!}</td>
</tr> 
@endforeach 
</tbody>
</table>
             </div>

        <div class="modal-footer" >
        <button type="submit"   class="btnsubmit">Add</button>
        </div>
      </div>
</form> 
    </div>
  </div>

Answer 1

您必须将您的 table 包装在具有相同 css 属性的 container 中。

#container{
height:50px;
overflow-y:scroll;
}

table{
width:100%;
}

<div id="container">
  <table>
    <tr><td>col</td><td>col</td><td>col</td></tr>
    <tr><td>col</td><td>col</td><td>col</td></tr>
    <tr><td>col</td><td>col</td><td>col</td></tr>
    <tr><td>col</td><td>col</td><td>col</td></tr>
    <tr><td>col</td><td>col</td><td>col</td></tr>
    <tr><td>col</td><td>col</td><td>col</td></tr>
    <tr><td>col</td><td>col</td><td>col</td></tr>
  </table>
</div>