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{
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>

减少html表高度和过度滚动 - HTML

1 个答案: