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

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

Answer 1

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

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

听起来像您的专栏无法排成一列。您可以做的是找出最宽元素（<td>或<th>）的宽度，然后将 all <td>和<th>元素设置为那个宽度。

另一种可能的解决方案是按照Bootstrap table docs的定义将table-responsive类添加到表中，并定义<td>和<th>元素的宽度连续有多少个如果<td>中有五个<tr>，请将<td>的宽度设置为20％。

希望这可以解决您的问题，如果没有，请在下面发表评论，我会再试一次。

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>

具有固定标头的Bootstrap可滚动表

3 个答案: