用于修复表头的引导代码

时间：2017-09-24 05:03:09

标签： html css twitter-bootstrap

我正在使用bootstrap处理前端应用程序。我有一个包含数据的表，我想修复表的标题，如果内容更多，滚动条应该出现在内容附近，只有内容应该滚动标题应该固定，如链接here

所示

我的代码示例：here

以下是我的代码：

＆＃13;
＆＃13; 
     .header-fixed {
            width: 100%
        }
        .table-fixed thead {
     }
.table-fixed tbody {
  height: 1220px;
  width: 100%;
}
＆＃13; 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<div>
  <div class="modal-body">
    <div class="row">
      <div class="" style="width: 80%; margin: 0px auto">
        <table class="table table-bordered header-fixed" style="border :1px">
          <thead>
            <tr style="background-color: #cdd0d6;">
              <th style="white-space: wrap;text-align: center;">ID</th>
              <th style="white-space: nowrap;text-align: center;">Description</th>
              <th style="white-space: wrap;text-align: center;">DoorNum</th>
              <th style="white-space: wrap;text-align: center;">First Name</th>
              <th style="white-space: wrap;text-align: center;">Num of ordered items</th>
              <th style="white-space: wrap;text-align: center;">Desc Comments</th>
            </tr>
          </thead>
          <tbody>
            <tr ng-repeat="data in blockedTestCaseDetails">
              <td style="text-align: center;">10</td>
              <td style="text-align: center; ">Item belongs to Navvy modal 2014WE belomgs to the user name JOE dispathched after one week of odered date</td>
              <td style="text-align: center; ">798</td>
              <td style="text-align: center; ">Joe</td>
              <td style="text-align: center; ">4</td>
              <td style="text-align: center; ">Order dispatched</td>
            </tr>
            <tr ng-repeat="data in blockedTestCaseDetails">
              <td style="text-align: center;">20</td>
              <td style="text-align: center; ">Item belongs to xyz modal 2013E</td>
              <td style="text-align: center; "></td>
              <td style="text-align: center; "></td>
              <td style="text-align: center; "></td>
              <td style="text-align: center; ">Not yet Ordered</td>
            </tr>
            <tr ng-repeat="data in blockedTestCaseDetails">
              <td style="text-align: center;">30</td>
              <td style="text-align: center; ">Item belongs to ABC modal 2017WE</td>
              <td style="text-align: center; ">99</td>
              <td style="text-align: center; ">ABC</td>
              <td style="text-align: center; "></td>
              <td style="text-align: center; "></td>
            </tr>
            <tr ng-repeat="data in blockedTestCaseDetails">
              <td style="text-align: center;">10</td>
              <td style="text-align: center; ">Item belongs to Navvy modal 2014WE belomgs to the user name JOE dispathched after one week of odered date</td>
              <td style="text-align: center; ">798</td>
              <td style="text-align: center; ">Joe</td>
              <td style="text-align: center; ">4</td>
              <td style="text-align: center; ">Order dispatched</td>
            </tr>
            <tr ng-repeat="data in blockedTestCaseDetails">
              <td style="text-align: center;">20</td>
              <td style="text-align: center; ">Item belongs to xyz modal 2013E</td>
              <td style="text-align: center; "></td>
              <td style="text-align: center; "></td>
              <td style="text-align: center; "></td>
              <td style="text-align: center; ">Not yet Ordered</td>
            </tr>
            <tr ng-repeat="data in blockedTestCaseDetails">
              <td style="text-align: center;">30</td>
              <td style="text-align: center; ">Item belongs to ABC modal 2017WE</td>
              <td style="text-align: center; ">99</td>
              <td style="text-align: center; ">ABC</td>
              <td style="text-align: center; "></td>
              <td style="text-align: center; "></td>
            </tr>
            <tr ng-repeat="data in blockedTestCaseDetails">
              <td style="text-align: center;">10</td>
              <td style="text-align: center; ">Item belongs to Navvy modal 2014WE belomgs to the user name JOE dispathched after one week of odered date</td>
              <td style="text-align: center; ">798</td>
              <td style="text-align: center; ">Joe</td>
              <td style="text-align: center; ">4</td>
              <td style="text-align: center; ">Order dispatched</td>
            </tr>
            <tr ng-repeat="data in blockedTestCaseDetails">
              <td style="text-align: center;">20</td>
              <td style="text-align: center; ">Item belongs to xyz modal 2013E</td>
              <td style="text-align: center; "></td>
              <td style="text-align: center; "></td>
              <td style="text-align: center; "></td>
              <td style="text-align: center; ">Not yet Ordered</td>
            </tr>
            <tr ng-repeat="data in blockedTestCaseDetails">
              <td style="text-align: center;">30</td>
              <td style="text-align: center; ">Item belongs to ABC modal 2017WE</td>
              <td style="text-align: center; ">99</td>
              <td style="text-align: center; ">ABC</td>
              <td style="text-align: center; "></td>
              <td style="text-align: center; "></td>
            </tr>
            <tr ng-repeat="data in blockedTestCaseDetails">
              <td style="text-align: center;">10</td>
              <td style="text-align: center; ">Item belongs to Navvy modal 2014WE belomgs to the user name JOE dispathched after one week of odered date</td>
              <td style="text-align: center; ">798</td>
              <td style="text-align: center; ">Joe</td>
              <td style="text-align: center; ">4</td>
              <td style="text-align: center; ">Order dispatched</td>
            </tr>
            <tr ng-repeat="data in blockedTestCaseDetails">
              <td style="text-align: center;">20</td>
              <td style="text-align: center; ">Item belongs to xyz modal 2013E</td>
              <td style="text-align: center; "></td>
              <td style="text-align: center; "></td>
              <td style="text-align: center; "></td>
              <td style="text-align: center; ">Not yet Ordered</td>
            </tr>
            <tr ng-repeat="data in blockedTestCaseDetails">
              <td style="text-align: center;">30</td>
              <td style="text-align: center; ">Item belongs to ABC modal 2017WE</td>
              <td style="text-align: center; ">99</td>
              <td style="text-align: center; ">ABC</td>
              <td style="text-align: center; "></td>
              <td style="text-align: center; "></td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>>
＆＃13;
＆＃13;
＆＃13;

有关如何修复标题以及使用bootstrap / css仅滚动正文内容的任何建议。我尝试如上所示，但没有按预期工作..

1 个答案:

答案 0 :(得分：0)

您可以在导航栏中执行＆＃34; style = position：fixed＆＃34;然后导航栏将保持原样，内容将仅滚动。

相关问题
最新问题