Bootstrap 4 表响应，水平和垂直滚动
Posted
技术标签:
【中文标题】Bootstrap 4 表响应，水平和垂直滚动【英文标题】：Bootstrap 4 Table Responsive, Horizontal and Vertical Scroll 【发布时间】：2018-11-15 06:25:51 【问题描述】：我在一个项目中使用带有 Angular 6 的引导表，并且我能够使用以下代码创建垂直滚动表体：
<table class="table table-striped table-bordered" style="margin-bottom: 0">
<thead> <!-- Column names -->
<tr>
<th scope="col">#</th>
<th scope="col">Col 1</th>
<th scope="col">Col 2</th>
<th scope="col">Col 3</th>
...
<th scope="col">Col N</th>
</tr>
</thead>
<tbody> <!-- Data -->
<tr>
<th scope="row">1</th>
<td>AAAAA</td>
<td>BBBBB</td>
<td>CCCCC</td>
...
<td>DDDDD</td>
</tr>
<tr>
<th scope="row">2</th>
<td>AAAAA</td>
<td>BBBBB</td>
<td>CCCCC</td>
...
<td>DDDDD</td>
</tr>
...
<tr>
<th scope="row">n</th>
<td>AAAAA</td>
<td>BBBBB</td>
<td>CCCCC</td>
...
<td>DDDDD</td>
</tr>
</tbody>
</table>
还有css：
tbody
display:block;
max-height:500px;
overflow-y:auto;
thead, tbody tr
display:table;
width:100%;
table-layout:fixed;
thead
width: calc( 100% - 1em )
但是现在，如果有很多列就不好看了。
所以我也想添加一个水平滚动，这样我就可以水平滚动整个表格，而只垂直滚动表格主体。 要进行水平滚动，我使用了 .table-responsive ，如下所示：
<div class="table-responsive">
<table class="table table-striped table-bordered" style="margin-bottom: 0">
...
</table>
</div>
但它只适用于没有 css 中的垂直滚动部分。
我想结合这两种方式来滚动表格。 我将 css 部分的宽度值从 100% 更改为静态 px 值，如下所示：
...
thead, tbody tr
display:table;
width: 2000px;
table-layout:fixed;
thead
width: calc( 2000px - 1em )
它有效，但我需要设置一个静态宽度，我不知道如何动态地做到这一点（取决于列数）。
【问题讨论】：
【参考方案1】：我这样修复它：首先我编辑了 css，然后我删除了 thead 部分，并在正文中添加了一些内容，如下所示：
body
--table-width: 100%; /* Or any value, this will change dinamically */
tbody
display:block;
max-height:500px;
overflow-y:auto;
thead, tbody tr
display:table;
width: var(--table-width);
table-layout:fixed;
我也离开了.table-responsive div：
<div class="table-responsive">
<table class="table table-striped table-bordered" style="margin-bottom: 0">
...
</table>
</div>
然后我根据列数和最长列名的长度计算了--table-width。我在我的组件 .ts 中使用 Angular 做到了这一点：
calculateTableWidth()
// Get the table container width:
const pageWidth = document.getElementById('tableCard').offsetWidth;
// Get the longest column name
const longest = this.tableColumns.sort(function (a, b) return b.length - a.length; )[0];
// Calculate table width
let tableWidth = this.tableColumns.length * longest.length * 14;
// If the width is less than the pageWidth
if (tableWidth < (pageWidth - 10))
// We set tableWidth to pageWidth - scrollbarWidth (10 in my project)
tableWidth = pageWidth - 10;
// Then we update the --table-width variable:
document.querySelector('body').style.cssText = '--table-width: ' + tableWidth + 'px';
我需要在ngOnInit() 的开头运行calculateTableWidth()（或者当我定义了tableColumns 数组时），然后当我调整窗口大小时：
ngOnInit()
this.tableColumns = this.myAppService.getTableColumnsNames();
this.calculateTableWidth();
@HostListener('window:resize', ['$event'])
onResize(event: any)
this.calculateTableWidth();
这就是我解决这个问题的方法。现在我有一个漂亮的表格，可以垂直和水平滚动。
【讨论】：
我会，现在不行，我得等到明天【参考方案2】：希望这将有助于任何机构开发修复标题角 6 表
scss
// Table related css start
.deallist-tbl
width: 100%;
.table-striped>tbody>tr:nth-child(odd)>td
background-color: #F9F9F9;
.table-hover tbody tr:hover td
background-color: #0099CC;
color: $content-text-white;
.table-hover tbody tr.active td
background-color: #0099CC;
color: $content-text-white;
table
border-collapse: collapse;
width: 100%;
overflow-x: scroll;
display: block;
thead
background-color: #F5F1EF;
thead,
tbody
display: block;
tbody
overflow-y: scroll;
overflow-x: hidden;
height: 650px;
td
min-width: 90px;
height: 30px;
border: solid 1px $border-color;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100px;
padding: 5px 5px 5px 10px;
&.index-clm
width: 35px;
min-width: 35px;
padding: 5px;
th
font-size: 10px;
font-weight: bold;
min-width: 90px;
height: 30px;
overflow: hidden;
text-overflow: ellipsis;
text-transform: uppercase;
max-width: 100px;
padding: 5px 5px 6px 10px;
border-left: solid 1px $content-text-black;
border-top: solid 1px $border-color;
border-bottom: solid 1px $border-color;
&:last-child
border-right: solid 1px $content-text-black;
&.index-clm
width: 35px;
min-width: 35px;
padding: 5px;
// Table related css end
HTML
<table class="table table-striped table-hover mb-0" id="dataTable" #tblDealList (scroll)="scrollHandler($event)">
<thead [style.width.px]="tblWidth">
<tr>
<th class="text-center index-clm">*</th>
<th app-sortable-column columnName="Column1">Column 1</th>
<th app-sortable-column columnName="Column2">Column 2</th>
<th app-sortable-column columnName="Column3">Column 3</th>
<th app-sortable-column columnName="Column4">Column 4</th>
<th app-sortable-column columnName="Column5">Column 5</th>
<th app-sortable-column columnName="Column6">Column 6</th>
<th app-sortable-column columnName="Column7">Column 7</th>
<th app-sortable-column columnName="Column8">Column 8</th>
<th app-sortable-column columnName="Column9">Column 9</th>
<th app-sortable-column columnName="Column10">Column 10</th>
<th app-sortable-column columnName="Column11">Column 11</th>
<th app-sortable-column columnName="Column12">Column 12</th>
<th app-sortable-column columnName="Column13">Column 13</th>
<th app-sortable-column columnName="Column14">Column 14</th>
<th app-sortable-column columnName="Column15">Column 15</th>
<th app-sortable-column columnName="Column16">Column 16</th>
</tr>
</thead>
<tbody [style.width.px]="tblWidth">
<tr *ngFor="let item of dealList; let i = index" [class.active]="activeCode===i" (click)="selectDealItem(content,item, i)"
(dblclick)="show()">
<td class="text-center index-clm">item.isModified ? '*' : ''</td>
<td>item.Column1 </td>
<td>item.Column2 </td>
<td>item.Column3 </td>
<td>item.Column4 </td>
<td>item.Column5 </td>
<td>item.Column6 </td>
<td>item.Column7 </td>
<td>item.Column8 </td>
<td>item.Column9 </td>
<td>item.Column10 </td>
<td>item.Column11 </td>
<td>item.Column12 </td>
<td>item.Column13 </td>
<td>item.Column14 </td>
<td>item.Column15 </td>
<td>item.Column16 </td>
</tr>
</tbody>
</table>
ts文件最重要的功能如下
/**
* set table width when scrolling
*/
@HostListener('window:scroll', ['$event'])
scrollHandler(event)
this.tblWidth = this.tblWidthInitial + event.target.scrollLeft;
初始表格宽度可以计算如下
@ViewChild('tblDealList') tblDealList: ElementRef;
ngOnInit 内部
this.tblWidthInitial = this.tblDealList.nativeElement.offsetWidth;
最终结果
【讨论】：
以上是关于Bootstrap 4 表响应，水平和垂直滚动的主要内容，如果未能解决你的问题，请参考以下文章
使用 flickity 和 bootstrap 4 进行水平卡片滚动（响应式）