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

问题描述 投票:0回答:2

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

enter image description here

所以我尝试的是:

<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”>元素的宽度和高度来修复此表,但必须有更好的方法来执行此操作。

html css twitter-bootstrap bootstrap-table
2个回答
0
投票

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

在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
投票

听起来你的列没有排列问题。你能做的是找出你最宽的元素有多宽(<td><th>),然后将所有<td><th>元素设置为该宽度。

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

希望这可以解决你的问题,如果没有,只需在下面评论,我会再试一次。

© www.soinside.com 2019 - 2024. All rights reserved.