带有固定标题的 Bootstrap 可滚动表

Question

我想创建一个包含大量数据的表。为了让一切都井井有条，我希望表格可以滚动。我使用 bootstrap 来整理表格。我知道之前有人问过这个问题，解决方案对我有用，但我的桌子一团糟。请参阅右侧的表格了解它的外观。我希望它看起来更像左边的桌子。

所以我尝试的是：

 <div class="panel panel-success">
    <div class="panel-heading">
        <h3 class="panel-title">Speciale tarieven buiten 's-Herogenbosch</h3>

        <div class="pull-right">
                        <span class="clickable filter" data-toggle="tooltip" title="Klik om te zoeken"
                              data-container="body">
                            <i class="glyphicon glyphicon-search"></i>
                        </span>
        </div>
    </div>
    <div class="panel-body">
        <input type="text" class="form-control" id="task-table-filter" data-action="filter"
               data-filters="#task-table" placeholder="Zoek naar een plaats.."/>
    </div>
    <table class="table table-hover table-fixed" id="task-table">
        <thead>
        <tr>
            <th >#</th>
            <th>Van</th>
            <th>Naar</th>
            <th>Normaal</th>
            <th>Onze prijs</th>
            <th>Korting</th>
        </tr>
        </thead>
        <tbody class="alignmentp">
        <tr>
            <td>1</td>
            <td>'s-Hertogenbosch</td>
            <td>Ammerzoden</td>
            <td>€ 35,00-</td>
            <td>€ 24,99-</td>
            <td>30 %</td>
        </tr>
        <tr>
            <td>2</td>
            //etc etc
        </tr>
        </tbody>
    </table>
</div>

我使用的 CSS 是：

 .alignmentp{
text-align: left !important;
}

.table-fixed thead {
width: 97%;
}
.table-fixed tbody {
height: 230px;
overflow-y: auto;
width: 100%;
}
.table-fixed thead, .table-fixed tbody, .table-fixed tr, .table-fixed td,     .table-fixed th {
display: block;
}
.table-fixed tbody td, .table-fixed thead > tr> th {
float: left;
border-bottom-width: 0;
}

我可以通过手动更正每个 <“tr”> 和 <“td”> 元素的宽度和高度来修复此表，但必须有更好的方法来执行此操作。

原文由 Mirwais 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

.fixHeader{
    overflow-y: auto;
}

.fixHeader th {
    position: sticky;
    top: 0;
    background-color: #b4bab4;
  }

  .fixHeader table {
    border-collapse: collapse;
    width: 100%;
  }

  .fixHeader th,
  .fixHeader td {
    padding: 8px 16px;
  }

     <div class="fixHeader" style="height:200px;">
          <table class="table card-border">
            <thead class="tableHead">
              <tr>
                <th scope="col">
                    <label class="form-check-label">xyz</label>
                </th>
                <th scope="col"> abc</th>
              </tr>
            </thead>
            <tbody>
              <tr *ngFor="let item of listData">
                <td>
                  <div class="form-check">
                    {{item.Name}}
                  </div>
                </td>
                <td>
                  <label class="form-check-label">{{ item.Value }}</label>
                </td>
              </tr>
            </tbody>
          </table>
        </div>

原文由 shriyansh jain 发布，翻译遵循 CC BY-SA 4.0 许可协议