如何固定表头的位置并仅滚动表体

Question

我创建了一个表，其中有 tbody 和 2 tr。 其中 1 tr 用于隐藏/显示数据。

我想固定表头的位置并只滚动表体。 由于我在 tbody 上使用 angular js ng-repeat 我无法滚动表格正文

我想要与此类似的输出。 Sample output with scrollable table body

但我的 Table 结构与此类似。下面是代码

<thead>
</thead>
<tbody ng-repeat="a in arr">
 <tr>
 </tr>

 <tr>
 </tr>
<tbody>

HTML 文件

            <thead>
                <tr>
                    <th style="text-align: center;">Edit</th>
                    <th style="text-align: center;">Case ID</th>
                    <th style="text-align: center;">Company Name</th>

                </tr>
                <tr>
                    <th colspan="8"><input  class="form-control"
                        placeholder="Search ..." type="text" id="search" ng- 
                  model="search.compyNmeEnteredByBDO"/></th>
                </tr>
            </thead>
          <tbody ng-repeat="newOpportunity in opportunitycopy >

                <tr>
                  <td>
                <label> <input type="checkbox" value="" ng- 
                          model="newOpportunity.isSelected"> <span
                                class="cr"><i class="cr-icon glyphicon 
                         glyphicon-ok"></i></span>

                            </label>
                  </td>
                    <td>
                        &nbsp;
                        {{newOpportunity.id}}   
                    </td>
                    <td>
                        {{newOpportunity.compyNmeEnteredByBDO}} 
                    </td>




                </tr>

                 <tr ng-show="newOpportunity.hidestatus">

                    <td colspan="8">
                            <div class="row">
                        <div class="col-lg-12 col-md-12">
                            <div class="ibox" id="mailbox-container">
                                <div class="mailbox-header d-flex justify-content-between"
                                    style="border-bottom: 1px solid #e8e8e8;">
                                    <div>
                                        <h5 class="inbox-title">Details</h5>
                                    </div>
                                </div>
                                <div class="mailbox-body">
                                    <form>
                                        <div class="row">
                                        <div class="col-sm-2 form-group">
                                                <label>Quantum</label> <input type="text" readonly
                                                    class="form-control" value="{{newOpportunity.quntm}}">
                                            </div>
                                        </div>
                                        <div class="row">

                                        </div>
                                        <div class="row">
                                        <div class="col-sm-2 form-group">
                                                <label>Remarks</label> <input type="text" readonly
                                                    class="form-control" value="{{newOpportunity.remarks}}">
                                            </div>
                            </div>

                                </div>
                            </div>
                        </div>
                    </div>


                </tr>
            </tbody>

Answer 1

你可以通过设置position: sticky;来做到这一点

table thead tr th {
  background-color: orange;
  position: sticky;
  top: -1px;
}

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<table class="table">
  <thead>
    <tr>
      <th>column1</th>
      <th>column2</th>
      <th>column3</th>
      <th>column4</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>td</td>
      <td>td</td>
      <td>td</td>
      <td>td</td>
    </tr>
    <tr>
      <td>td</td>
      <td>td</td>
      <td>td</td>
      <td>td</td>
    </tr>
    <tr>
      <td>td</td>
      <td>td</td>
      <td>td</td>
      <td>td</td>
    </tr>
    <tr>
      <td>td</td>
      <td>td</td>
      <td>td</td>
      <td>td</td>
    </tr>
    <tr>
      <td>td</td>
      <td>td</td>
      <td>td</td>
      <td>td</td>
    </tr>
    <tr>
      <td>td</td>
      <td>td</td>
      <td>td</td>
      <td>td</td>
    </tr>
    <tr>
      <td>td</td>
      <td>td</td>
      <td>td</td>
      <td>td</td>
    </tr>
    <tr>
      <td>td</td>
      <td>td</td>
      <td>td</td>
      <td>td</td>
    </tr>
    <tr>
      <td>td</td>
      <td>td</td>
      <td>td</td>
      <td>td</td>
    </tr>
    <tr>
      <td>td</td>
      <td>td</td>
      <td>td</td>
      <td>td</td>
    </tr>
    <tr>
      <td>td</td>
      <td>td</td>
      <td>td</td>
      <td>td</td>
    </tr>
    <tr>
      <td>td</td>
      <td>td</td>
      <td>td</td>
      <td>td</td>
    </tr>
    <tr>
      <td>td</td>
      <td>td</td>
      <td>td</td>
      <td>td</td>
    </tr>
    <tr>
      <td>td</td>
      <td>td</td>
      <td>td</td>
      <td>td</td>
    </tr>
  </tbody>

</table>

Answer 2

要实现这一点，您必须尝试以下操作。

为您的tbody 提供一个高度，并为滚动overflow-y:auto; 溢出将给您一个期望的结果。