Bootstrap-4 Tabelle Reaktionsschnell Weg, Horizontale und Vertikale Bildlaufleiste

Ich bin mit bootstrap-Tabellen mit Eckigen 6 in einem Projekt, und ich war in der Lage zur Erstellung von vertikalen scrollen der Tabelle-Körper mit diesem code:

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

Und 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 )
  }

Aber nun, wenn es gibt eine Menge von Spalten, es sieht nicht gut aus.

Bootstrap-4 Tabelle Reaktionsschnell Weg, Horizontale und Vertikale Bildlaufleiste

So, ich wollte hinzufügen, um eine horizontale Bildlaufleiste zu, so konnte ich scrollen, die Tabelle horizontal und nur in der Tabelle Körper vertikal.
Zu tun, mit der horizontalen Bildlaufleiste die ich verwendet habe .table-responsive wie diese:

<div class="table-responsive">
    <table class="table table-striped table-bordered" style="margin-bottom: 0">
    ...
    </table>
</div>

Aber es funktioniert nur ohne die vertikale Bildlaufleiste Teil in der css.

Bootstrap-4 Tabelle Reaktionsschnell Weg, Horizontale und Vertikale Bildlaufleiste

Möchte ich kombinieren diese beiden Möglichkeiten, um das scrollen der Tabelle.
Ich habe die Werte für die Breite und auf den css-Teil aus 100% statische px-Werte wie diese:

...
thead, tbody tr {
      display:table;
      width: 2000px;
      table-layout:fixed;
  }
  thead {
      width: calc( 2000px - 1em )
  }

Und es hat funktioniert, aber ich brauche, um eine statische Breite und ich weiß nicht, wie kann ich dies dynamisch (je nach Anzahl der Spalten).

Bootstrap-4 Tabelle Reaktionsschnell Weg, Horizontale und Vertikale Bildlaufleiste

InformationsquelleAutor JCAguilera | 2018-06-05

Ich fest es dies wie folgt: Zuerst bearbeitete ich die css, dann entfernte ich die thead Teil, und einige zusätzliche Inhalte in den Körper wie diese:

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

Ich auch Links die .table-responsive div:

<div class="table-responsive">
    <table class="table table-striped table-bordered" style="margin-bottom: 0">
    ...
    </table>
</div>

Dann habe ich berechnet --table-width je nach Anzahl der Spalten und die Länge der längsten Spalte name. Ich Tat dies mit Eckigen, in meine Komponente .ts:

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

Muss ich laufen calculateTableWidth() am Anfang in ngOnInit() (oder wenn ich habe die tableColumns array) und dann, wenn ich die Größe der Fenster:

ngOnInit() {
  this.tableColumns = this.myAppService.getTableColumnsNames();
  this.calculateTableWidth();
}

@HostListener('window:resize', ['$event'])
onResize(event: any) {
  this.calculateTableWidth();
}

Und das ist, wie ich reparierte diese. Jetzt habe ich eine gut aussehende Tabelle, mit vertikalen und horizontalen scrollen.

markieren Sie diese als richtig an.
Ich werde, jetzt ich kann nicht, ich muss bis morgen warten

InformationsquelleAutor JCAguilera

Hoffe, dies wird helfen, alle Körper zu entwickeln, fix-header-Winkel-6 Tabelle

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>

Wichtigste Funktion des ts-Datei ist wie folgt

 /**
   * set table width when scrolling
   */
  @HostListener('window:scroll', ['$event'])
  scrollHandler(event) {
    this.tblWidth = this.tblWidthInitial + event.target.scrollLeft;
  }

Ersten table-Breite kann wie folgt berechnet werden

  @ViewChild('tblDealList') tblDealList: ElementRef;

Innen ngOnInit

  this.tblWidthInitial = this.tblDealList.nativeElement.offsetWidth;

Endgültige Ergebnis

Bootstrap-4 Tabelle Reaktionsschnell Weg, Horizontale und Vertikale Bildlaufleiste

InformationsquelleAutor Janith Widarshana

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.