Tabelle mit fester Überschrift und scrollbarem Körperbereich

Question

Ich versuche, eine Tabelle mit festem Header und einem scrollbaren Inhalt unter Verwendung der Bootstrap 3-Tabelle zu erstellen. Leider funktionieren die Lösungen, die ich gefunden habe, nicht mit Bootstrap oder machen das Styling kaputt.

Hier ist eine einfache Bootstrap-Tabelle, aber aus mir unbekannten Gründen ist die Höhe des tbody nicht 10px.

height: 10px !important; overflow: scroll;

Beispiel:

        Marke
        Modell
        Farbe
        Jahr

        111 Ford
        Escort
        Blau
        2000

        Ford
        Escort
        Blau
        2000

        Ford
        Escort
        Blau
        2000

        Ford
        Escort
        Blau
        2000

Answer 1

Feststehender Tabellenkopf - Nur CSS

Einfach position: sticky; top: 0; zu Ihren th Elementen hinzufügen. (Chrome, FF, Edge)

.tableFixHead          { overflow: auto; height: 100px; }
.tableFixHead thead th { position: sticky; top: 0; z-index: 1; }

/* Normale Tabelleneigenschaften. Wirklich. */
table  { border-collapse: collapse; width: 100%; }
th, td { padding: 8px 16px; }
th     { background:#eee; }

      TH 1TH 2

      A1A2
      B1B2
      C1C2
      D1D2
      E1E2

Für sowohl vertikale TH und horizontale TH-Spalten (innerhalb von TBODY):

.tableFixHead          { overflow: auto; height: 100px; width: 240px; }
.tableFixHead thead th { position: sticky; top: 0; z-index: 1; }
.tableFixHead tbody th { position: sticky; left: 0; }

.tableFixHead          { overflow: auto; height: 100px; width: 240px; }
.tableFixHead thead th { position: sticky; top: 0; z-index: 1; }
.tableFixHead tbody th { position: sticky; left: 0; }

/* Normale Tabelleneigenschaften. Wirklich. */
table  { border-collapse: collapse; width: 100%; }
th, td { padding: 8px 16px; white-space: nowrap; }
th     { background:#eee; }

      TH 1TH 2

      FooSome long text lorem ipsumDolor sit amet
      BarB1B2
      BazC1C2
      FuzD1D2
      ZupE1E2

TH-Rahmen Problem beheben

Da border auf einem übersetzten TH Element nicht richtig dargestellt werden kann, verwenden Sie die box-shadow Eigenschaft, um "Rahmen" zu erstellen und anzeigen zu lassen:

/* Rahmen (falls benötigt) */
.tableFixHead,
.tableFixHead td {
  box-shadow: inset 1px -1px #000;
}
.tableFixHead th {
  box-shadow: inset 1px 1px #000, 0 1px #000;
}

.tableFixHead          { overflow: auto; height: 100px; }
.tableFixHead thead th { position: sticky; top: 0; z-index: 1; }

/* Normale Tabelleneigenschaften. Wirklich. */
table  { border-collapse: collapse; width: 100%; }
th, td { padding: 8px 16px; }
th     { background:#eee; }

/* Rahmen (falls benötigt) */
.tableFixHead,
.tableFixHead td {
  box-shadow: inset 1px -1px #000;
}
.tableFixHead th {
  box-shadow: inset 1px 1px #000, 0 1px #000;
}

      TH 1TH 2

      A1A2
      B1B2
      C1C2
      D1D2
      E1E2

TH-Sticky funktioniert nicht - Problembehebung

Vergewissern Sie sich, dass Elternelemente des "th" Elements, mindestens bis zum table Element (einschließlich), keine mit overflow zusammenhängenden Styles festlegen (z.B. overflow, overflow-x, overflow-y).

Weitere Informationen finden Sie auf stackoverflow.com/Warum funktioniert 'position: sticky' nicht?

---

Feststehender Tabellenkopf - Verwendung von JavaScript

Für alte Browser können Sie ein wenig JS verwenden und die th Elemente mit translateY verschieben

// Beispiel für die Behebung des Tabellenkopfs:

function tableFixHead(evt) {
  const el = evt.currentTarget,
    sT = el.scrollTop;
  el.querySelectorAll("thead th").forEach(th =>
    th.style.transform = `translateY(${sT}px)`
  );
}

document.querySelectorAll(".tableFixHead").forEach(el =>
  el.addEventListener("scroll", tableFixHead)
);

.tableFixHead {
  overflow-y: auto;
  height: 100px;
}

/* Normale Tabelleneigenschaften. */

table {
  border-collapse: collapse;
  width: 100%;
}

th,
td {
  padding: 8px 16px;
}

th {
  background: #eee;
}

      TH 1TH 2

      A1A2
      B1B2
      C1C2
      D1D2
      E1E2

Answer 2

Für einen reinen CSS-Ansatz benötigen Sie einen Container mit overflow-y: auto; und entscheiden, wie gescrollte/überflossene Zeilen ausgeblendet werden sollen:

1. Überlagerung durch einen nicht transparenten fixierten Header (position: sticky; top: 0; z-index: 1;), wie in @RokoCBuljans Antwort.
2. Sichtbarkeit der Zeilen umschalten (indem Sie die tr:after-Eigenschaften wie unten einstellen).

Beachten Sie, dass der Container ein externes

sein kann, oder das ` `display: block;div`

Unten finden Sie eine modifizierte Lösung von @giulio:

:root {
  --height-height: 150px;
  /* Die Zellenbreite muss Platz für das Scrollen reservieren. Daher ist die Summe < 100% */
  --cell-width: 85px;
}

.header-fixed {
  width: 200px;
}

/* Behandle alles als 

selbst, oder ein Teil davon (z.B. ). Für die letzten beiden müssen Sie setzen, damit sie effektiv wie s behandelt werden.

Überschrift 1

Überschrift 2

Zelle 11

Zelle 12

Zelle 21

Zelle 22

Zelle 31

Zelle 32

Zelle 41

Zelle 42

Zelle 51

Zelle 52

Zelle 61

Zelle 62

Zelle 71

Zelle 72

Zelle 81

Zelle 82

Zelle 91

Zelle 92

``

Beachten Sie: Wenn Sie >2 Spalten haben, müssen Sie entsprechend mit der `var(--cell-width)`-Variable herumspielen.

``

Answer 3

Hier ist die funktionierende Lösung:

table {
    width: 100%;
}

thead, tbody, tr, td, th { display: block; }

tr:after {
    content: ' ';
    display: block;
    visibility: hidden;
    clear: both;
}

thead th {
    height: 30px;

    /*text-align: left;*/
}

tbody {
    height: 120px;
    overflow-y: auto;
}

thead {
    /* fallback */
}

tbody td, thead th {
    width: 19.2%;
    float: left;
}

            Make
            Model
            Color
            Year

            Ford
            Escort
            Blue
            2000

            Ford
            Escort
            Blue
            2000

            Ford
            Escort
            Blue
            2000

            Ford
            Escort
            Blue
            2000

Link zu jsfiddle

Answer 4

Aktualisierung

Für eine neuere und noch gepflegte Bibliothek versuchen Sie jquery.floatThead (wie von Bob Jordan im Kommentar erwähnt) stattdessen.

Alte Antwort

Dies ist eine sehr alte Antwort, die unten genannte Bibliothek wird nicht mehr gepflegt.

Ich verwende StickyTableHeaders auf GitHub und es funktioniert wunderbar!

Ich musste jedoch diesen CSS-Code hinzufügen, um den Header nicht transparent zu machen.

table#stickyHeader thead {
  border-top: none;
  border-bottom: none;
  background-color: #FFF;
}

Answer 5

Mit Abstand die beste Lösung, die ich gesehen habe, die nur CSS ist, mit guter Unterstützung für verschiedene Browser und keine Ausrichtungsprobleme hat, ist diese Lösung von codingrabbithole

table {
  width: 100%;
}
thead, tbody tr {
  display: table;
  width: 100%;
  table-layout: fixed;
}
tbody {
  display: block;
  overflow-y: auto;
  table-layout: fixed;
  max-height: 200px;
}