HTML-Tabelle mit 100% Breite, mit vertikalem Scrollen innerhalb des tbody

Question

Wie kann ich für table 100% Breite festlegen und nur innerhalb von tbody eine vertikale Bildlaufleiste für eine bestimmte Höhe einfügen?

table {
    width: 100%;
    display:block;
}
thead {
    display: inline-block;
    width: 100%;
    height: 20px;
}
tbody {
    height: 200px;
    display: inline-block;
    width: 100%;
    overflow: auto;
}

        Überschrift 1
        Überschrift 2
        Überschrift 3
        Überschrift 4
        Überschrift 5

        Inhalt 1
        Inhalt 2
        Inhalt 3
        Inhalt 4
        Inhalt 5

Ich möchte vermeiden, zusätzliche div-Elemente hinzuzufügen. Alles was ich möchte, ist eine einfache Tabelle wie diese, und wenn ich versuche, das Display, table-layout, position und viele andere CSS-Eigenschaften zu ändern, funktioniert die Tabelle mit einer Breite von 100% nur mit fester Breite in px nicht gut.

Answer 1

Im folgenden Lösungsansatz nimmt die Tabelle 100% des übergeordneten Containers ein, ohne absolute Größenangaben zu benötigen. Es handelt sich um reinen CSS, das Flex-Layout wird verwendet.

So sieht es aus:

Mögliche Nachteile:

• Die vertikale Scrollleiste ist immer sichtbar, unabhängig davon, ob sie benötigt wird oder nicht;
• Das Tabellenlayout ist fest - die Spalten passen sich nicht der Inhaltsbreite an (Sie können jedoch die Breite der Spalten explizit festlegen);
• Es gibt eine absolut Größe - die Breite der Scrollleiste, die etwa 0,9em für die Browser beträgt, die ich überprüft habe.

HTML (verkürzt):

            ...

                Überschrift1
                Überschrift2
                Überschrift3
                Überschrift4

                Inhalt1
                Inhalt2
                Inhalt3
                Inhalt4

                Inhalt1
                Inhalt2
                Inhalt3
                Inhalt4

CSS, wobei einige Dekorationen aus Gründen der Klarheit weggelassen wurden:

.table-container {
    height: 10em;
}
table {
    display: flex;
    flex-flow: column;
    height: 100%;
    width: 100%;
}
table thead {
    /*Die Überschrift nimmt die erforderliche Höhe ein und wird nicht skaliert, wenn die Tabelle neu dimensioniert wird*/
    flex: 0 0 auto;
    width: calc(100% - 0.9em);
}
table tbody {
    /*Der Inhalt nimmt den verbleibenden verfügbaren Platz ein*/
    flex: 1 1 auto;
    display: block;
    overflow-y: scroll;
}
table tbody tr {
    width: 100%;
}
table thead, table tbody tr {
    display: table;
    table-layout: fixed;
}

Vollständiger Code auf jsfiddle

Derselbe Code in LESS, damit Sie ihn einbeziehen können:

.table-scrollable() {
  @scrollbar-width: 0.9em;
  display: flex;
  flex-flow: column;

  thead,
  tbody tr {
    display: table;
    table-layout: fixed;
  }

  thead {
    flex: 0 0 auto;
    width: ~"calc(100% - @{scrollbar-width})";
  }

  tbody {
    display: block;
    flex: 1 1 auto;
    overflow-y: scroll;

    tr {
      width: 100%;
    }
  }
}

Answer 2

Nur CSS

für Chrome, Firefox, Edge (und andere immergrüne Browser)

Einfach position: sticky; top: 0; auf Ihre th Elemente anwenden:

/* Fixieren Sie die Kopfzeile der Tabelle */
.tableFixHead    { overflow: auto; height: 100px; }
.tableFixHead th { position: sticky; top: 0; }

/* Einfach nur allgemeine Tabellenformatierung. */
table  { border-collapse: collapse; width: 100%; }
th, td { padding: 8px 16px; }
th     { background:#eee; }

      TH 1TH 2

      A1A2
      B1B2
      C1C2
      D1D2
      E1E2

PS: Wenn Sie Rahmen für TH Elemente benötigen, wird th {box-shadow: 1px 1px 0 #000; border-top: 0;} helfen (da die Standardrahmen während des Scrollens nicht korrekt dargestellt werden).

Für eine Variante des obigen Beispiels, das nur ein bisschen JS verwendet, um IE11 zu berücksichtigen, sehen Sie diese Antwort Feste Tabellenkopfzeile und scrollbarer Body

Answer 3

In modernen Browsern kannst du einfach CSS verwenden:

th {
  position: sticky;
  top: 0;
  z-index: 2;
}

Answer 4

Ich verwende display:block für thead und tbody. Aufgrund dessen ist die Breite der thead Spalten unterschiedlich von der Breite der tbody Spalten.

table {
    margin:0 auto; 
    border-collapse:collapse;
}
thead {
    background:#CCCCCC;
    display:block
}
tbody {
    height:10em;overflow-y:scroll;
    display:block
}

Um dies zu beheben, verwende ich einen kleinen jQuery Code, aber es kann auch nur mit JavaScript gemacht werden.

var colNumber=3 //Anzahl der Tabellenspalten    

for (var i=0; i

``Hier ist meine Arbeitsdemo: http://jsfiddle.net/gavroche/N7LEF/

Funktioniert nicht in IE 8

var colNumber=3 //Anzahl der Tabellenspalten

for (var i=0; i

`table {margin:0 auto; border-collapse:separate;} thead {background:#CCCCCC;display:block} tbody {height:10em;overflow-y:scroll;display:block}

            Ein wirklich sehr langer Kopftext
            Normaler Kopf
            Kurz            

                Text kürzer als Kopfzeile

                Text ist länger als Kopfzeile

                Genau` ``

Answer 5

Erstellen Sie zwei Tabellen nacheinander, setzen Sie die zweite Tabelle in ein div mit fester Höhe und setzen Sie die overflow-Eigenschaft auf auto. Lassen Sie auch alle td's im thead der zweiten Tabelle leer.

                Head 1
                Head 2
                Head 3
                Head 4
                Head 5

            Content 1
            Content 2
            Content 3
            Content 4
            Content 5