我想创建一个包含大量数据的表。为了保持整理,我希望表可以滚动。我使用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”>元素的宽度和高度来修复此表,但必须有更好的方法来执行此操作。
你可以查看这个对我有帮助的答案。
在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;
}
我希望这会解决你的问题:)
听起来你的列没有排列问题。你能做的是找出你最宽的元素有多宽(<td>
或<th>
),然后将所有<td>
和<th>
元素设置为该宽度。
另一种可能的解决方案是将table-responsive
类添加到您的表中,如Bootstrap table docs中所定义,并使<td>
和<th>
元素的宽度由一行中的多少来定义。如果在<td>
中有五个<tr>
s,则将<td>
s的宽度设置为20%。
希望这可以解决你的问题,如果没有,只需在下面评论,我会再试一次。