bootstrapテーブルを含む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-sensitiveを使用しました。
<div class="table-responsive">
<table class="table table-striped table-bordered" style="margin-bottom: 0">
...
</table>
</div>
しかし、それはCSSの垂直スクロール部分なしでのみ機能します。
この2つの方法を組み合わせて、テーブルをスクロールしたいと思います。 cssパーツの幅の値を、次のように100%から静的なpx値に変更しました。
...
thead, tbody tr {
display:table;
width: 2000px;
table-layout:fixed;
}
thead {
width: calc( 2000px - 1em )
}
そしてそれは機能しましたが、静的な幅を設定する必要があり、これを動的に行う方法がわかりません(列の数によって異なります)。
これを次のように修正しました。最初に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';
}
_
calculateTableWidth()
の最初(またはtableColumns配列を定義したとき)にngOnInit()
を実行してから、ウィンドウのサイズを変更する必要があります。
_ngOnInit() {
this.tableColumns = this.myAppService.getTableColumnsNames();
this.calculateTableWidth();
}
@HostListener('window:resize', ['$event'])
onResize(event: any) {
this.calculateTableWidth();
}
_
そして、それが私がこれを修正した方法です。これで、縦と横にスクロールできる見栄えの良いテーブルができました。
これが修正ヘッダーを開発するのに役立つことを願っていますangular 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;
最終結果