具有固定标题的引导可滚动表

Question

我想创建一个包含大量数据的表。为了保持一切顺利，我希望表格可以滚动。我使用引导程序来拉皮条。 我知道以前有人问过这个问题，并且该解决方案确实对我有用，但是我的桌子一团糟。请参阅右侧的表格以了解其外观。我希望它看起来更像左边的桌子。

所以我尝试的是：

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

我可以通过手动更正每个 和 元素的宽度和高度来修复此表，但必须有更好的方法来做到这一点..

Answer 1

听起来您遇到了列不对齐的问题。您可以做的是找出最宽元素的宽度（<td> 或 <th>），然后将 all <td> 和 <th> 元素设置为该宽度。

另一种可能的解决方案是将table-responsive 类添加到您的表中，如Bootstrap table docs 中定义的那样，并使<td> 和<th> 元素的宽度由一行中的数量定义.如果<tr>中有五个<td>s，则将<td>s的宽度设置为20%。

希望这能解决您的问题，如果没有，请在下方评论，我会再试一次。

Answer 2

你可以查看这个对我有帮助的答案。

在 HTML 中你可以添加这个：

<div class="panel panel-default">
    <div class="panel-body">
        <table id="myTable" class="table table-hover table-fixedheader table-bordered table-striped">
            <thead>
                <tr>
                    <th width="15%">Column1Column1Column1Column1</th>
                    <th width="15%">Column2</th>
                    <th width="15%">Column3</th>
                    <th width="15%">Column4</th>
                    <th width="40%">Column5</th>
                </tr>
            </thead>
            <tbody style="height:110px">
                <tr>
                    <td width="15%">aaaaaaaaaaa</td>
                    <td width="15%">bbbbbbbbbbb</td>
                    <td width="15%">ccccccccccc</td>
                    <td width="15%">ddddddddddd</td>
                    <td width="40%">eeeeeeeeeee</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

在您的 CSS 中添加此链接：

 table.table-fixedheader {
    width: 100%;   
}

 table.table-fixedheader, table.table-fixedheader>thead, table.table-fixedheader>tbody, table.table-fixedheader>thead>tr, table.table-fixedheader>tbody>tr, table.table-fixedheader>thead>tr>th, table.table-fixedheader>tbody>td {
    display: block;
}
table.table-fixedheader>thead>tr:after, table.table-fixedheader>tbody>tr:after {
    content:' ';
    display: block;
    visibility: hidden;
    clear: both;
}

 table.table-fixedheader>tbody {
    overflow-y: scroll;
    height: 100px;
    
}

 table.table-fixedheader>thead {
    overflow-y: scroll;    
}

 table.table-fixedheader>thead::-webkit-scrollbar {
    background-color: inherit;
}


table.table-fixedheader>thead>tr>th:after, table.table-fixedheader>tbody>tr>td:after {
    content:' ';
    display: table-cell;
    visibility: hidden;
    clear: both;
}

 table.table-fixedheader>thead tr th, table.table-fixedheader>tbody tr td {
    float: left;    
    word-wrap:break-word;     
}

Answer 3

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