webentwicklung-frage-antwort-db.com.de

Wie man klebrige Tabellenüberschriften korrekt formatiert?

Ich habe ein kleines Problem mit der klebrigen Kopfzeile in meiner Datentabelle. Ich habe eine einfache Angular Komponente und eine spezifische Direktive geschrieben:

sticky.directive.ts

@Directive({
    selector: '[sticky]'
})
export class StickyDirective {

    constructor(private _element: ElementRef, private _window: WindowRef) {
        console.log('debug')
    }

    @HostListener('window:scroll', ['$event'])
    handleScrollEvent(e) {
        if (this._window.nativeWindow.pageYOffset > 100) {
            this._element.nativeElement.classList.add('stick');
        } else {
            this._element.nativeElement.classList.remove('stick');
        }
    }
}

Der Zweck der Direktive besteht darin, eine Klassestickhinzuzufügen, wenn der Benutzer unter der Kopfzeile blättert. Infolgedessen sollte die Tabellenüberschrift für den Benutzer sichtbar sein, auch wenn er einen Bildlauf durch die lange Tabelle durchführt. stick Klasse sieht so aus:

.stick {
    position: fixed;
    top: 55px;
} 

und ein Teil meiner some.component.html (und die Anweisung für das Element thead verwenden) sehen so aus:

<table class=" table table-bordered ">
 <thead sticky>
   <tr>
    <th width="40%">Name
    </th>
    <th width="10%">Priority
    </th>
    <th width="25%">Date created
    </th>
    <th width="25%">Date modified
    </th>   </tr>   </thead>   <tbody>   <tr *ngFor="let r of entitiesFiltered">
    <td>
      <div class="table-cell-flex">
        <div class="cell-content">
          {{r.name}}
        </div>
      </div>
    </td>
    <td>
      <div class="table-cell-flex">
        <div class="cell-content">
          {{r.priority}}
        </div>
      </div>
    </td>
...

Mein Code erfüllt grundlegende Funktionen. Dies bedeutet, dass die Überschrift während der Bildlaufseite an derselben Stelle bleibt, sich jedoch die Breite der Überschriften und Spalten ändert. Es sieht aus wie:  enter image description here


Frage:

Jeder kann mir sagen, wie ich meine Tabelle stylen soll, dass die feste Kopfzeile die Form/Form-Tabelle nicht ändert? Ist es möglich?

6
Jaroslaw K.

sie erhalten die Breite aller Spalten mit JavaScript und setzen dann die Überschrift auf px an der festen oder absoluten Position oder mit HTML und Code:

<div class="table-wrapper content">
  <!-- overall wrapper -->
  <table>
    <!-- header -->
    <thead>
      <tr>
        <th>Header 1</th>
        <th>Header 2</th>
        <th>Header 3</th>
      </tr>
    </thead>
  </table>
</div>
<div class="table-body-wrapper" style="position: relative; overflow: visible;">
  <!-- the element with the custom scrollbar -->
  <table>
    <!-- body -->
    <tbody>
      <!-- auto-generated data (see js function below) -->
      <tr>
        <td>Row 1, Column 1</td>
        <td>Row 1, Column 2</td>
        <td>Row 1, Column 3</td>
      </tr>
      <tr>
        <td>Row 2, Column 1</td>
        <td>Row 2, Column 2</td>
        <td>Row 2, Column 3</td>
      </tr>
      <tr>
        <td>Row 3, Column 1</td>
        <td>Row 3, Column 2</td>
        <td>Row 3, Column 3</td>
      </tr>
      <tr>
        <td>Row 4, Column 1</td>
        <td>Row 4, Column 2</td>
        <td>Row 4, Column 3</td>
      </tr>
      <tr>
        <td>Row 5, Column 1</td>
        <td>Row 5, Column 2</td>
        <td>Row 5, Column 3</td>
      </tr>
    </tbody>
  </table>
</div>
1
Morteza Fathnia

Ich stand vor dem gleichen Problem.
Um das Problem zu lösen, habe ich einen einfachen Hack erstellt, in dem ich die feste Spaltenbreite in Sticky-Headern festgelegt und die Sticky-Headern unter der Tabelle dupliziert habe (um die Breite des Inhalts der Spaltennamen beizubehalten).

Meine Lösung basiert auf Bootstrap 4 und Angular 6 .


example.component.html :

<table class="table">
  <thead>
  <tr>
    <th #tableColumn1>Column 1</th>
    <th #tableColumn2>Column 2</th>
    <th #tableColumn3>Column 3</th>
  </tr>
  </thead>
  <tbody>
  <tr *ngFor="let message of messages">
    <td>{{ message.title }}</td>
    <td>{{ message.author }}</td>
    <td>{{ message.created_at }}</td>
  </tr>
  </tbody>
</table>

<table class="table" [class.d-none]="!showFixedTableHeader">
  <thead>
  <tr [class.sticky]="showFixedTableHeader">
    <th [width]="tableColumn1.offsetWidth">Column 1</th>
    <th [width]="tableColumn2.offsetWidth">Column 2</th>
    <th [width]="tableColumn3.offsetWidth">Column 3</th>
  </tr>
  </thead>
</table>


Beispiel.Komponente.ts

import {Component, HostListener} from '@angular/core';

@Component({
  templateUrl: './example.component.html',
  styleUrls: ['./example.component.css']
})
export class ExampleComponent {

  showFixedTableHeader: boolean = false;

  @HostListener('window:scroll')
  onScroll() {
    const pageTopOffset = window.pageYOffset;

    if (pageTopOffset > 285) {
      this.showFixedTableHeader = true;
    } else {
      this.showFixedTableHeader = false;
    }
  }

  @HostListener('window:resize')
  onResize() {
    // Do nothing.
    // It will automatically trigger to update the bound properties in template.
  }
}


Beispiel.Komponenten.CSS

tr.sticky {
  top: 60px;
  position: fixed;
  z-index: 99;
}
0
Leonid Dashko
0
Thomas Decaux