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

9jyewag0 于 2022-12-07 发布在 Bootstrap

关注(0)|答案(3)|浏览(169)

I want to create a table with a lot of data. To keep it all sorted out, I want the table to be scrollable. I use bootstrap to pimp up the table. I know this question is asked before and the solution does work for me, but my table is a mess. See the table on the right for what it looks like. I want it to look more like the table to the left.

So what I tried is:

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

And the CSS I use with this is:

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

I can fix this table by manually correcting the width and height of each <"tr"> and <"td"> element, but there must be a better way of doing this..

twitter-bootstrap

来源：https://stackoverflow.com/questions/35022947/bootstrap-scrollable-table-with-fixed-header

3条答案

按热度按时间

0mkxixxg1#

听起来你遇到了列不对齐的问题。你可以做的是找出你最宽的元素有多宽（<td>或<th>），然后将 all<td>和<th>元素设置为该宽度。
另一个可能的解决方案是将table-responsive类添加到表中，如Bootstrap表文档中所定义的那样，并使<td>和<th>元素的宽度由一行中的元素数来定义。如果<tr>中有五个<td>，则将<td>的宽度设置为20%。
希望这能解决你的问题，如果没有，请在下面评论，我会再试一次。

赞(0）回复(0）举报 2022-12-07

new9mtju2#

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

赞(0）回复(0）举报 2022-12-07

dbf7pr2w3#

你可以检查一下这个答案，它对我很有帮助。
在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;     
}

赞(0）回复(0）举报 2022-12-07

我来回答

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

3条答案

相关问题

热门标签

最新问答