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

Question

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

我想固定表头的位置并只滚动表体。 因为我在 tbody 上使用 angular js ng-repeat，所以我无法滚动表体

我想要类似这样的输出。 Sample output with scrollable table body

但是我的表结构和这个差不多。下面是代码

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