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

Nicht einpacken in ein div...

CSS:

tr {
width: 100%;
display: inline-table;
table-layout: fixed;
}

table{
 height:300px;              // <-- Wählen Sie die Höhe der Tabelle
 display: block;
}
tbody{
  overflow-y: scroll;      
  height: 200px;            //  <-- Wählen Sie die Höhe des Body
  width: 100%;
  position: absolute;
}

Bootply : https://www.codeply.com/p/nkaQFc713a

Answer 2

Es ist einfacher mit CSS

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

Answer 3

table {
    overflow-y: auto;
    height: 50vh;     /* !!!  HEIGHT MUST BE IN [ vh ] !!! */
}

thead th {
    background-color: white;
    position: sticky;
    top: 0;
}

        TH 1TH 2

        A1A2
        B1B2
        C1C2
        D1D2
        E1E2
        F1F2
        G1G2
        H1H2
        I1I2
        J1J2
        K1K2
        L1L2
        M1M2
        N1N2
        O1O2
        P1P2
        Q1Q2
        R1R2
        S1S2
        T1T2
        U1U2
        V1V2
        W1W2
        X1X2
        Y1Y2
        Z1Z2

Du brauchst keine js. Wichtig ist, die Tabellehöhe in [vh] einzustellen

Answer 4

Zu spät zur Party (Geschichte meines Lebens), aber da dies das erste Ergebnis bei Google ist und keines der oben genannten Dinge funktioniert hat, hier ist mein Code

/*Setzen Sie eine Mindestbreite fest, ab der Ihre Tabelle miserabel aussieht*/
table { min-width: 600px; }

/*Die nächsten 3 Abschnitte lassen das Magic passieren*/
thead, tbody tr {
    display: table;
    width: 100%;
    table-layout: fixed;
}

tbody {
    display: block;
    max-height: 200px;
    overflow-x: hidden;
    overflow-y: scroll;
}

td {
    overflow: hidden;
    text-overflow: ellipsis;
}

/*Verwenden Sie das Folgende, um sicherzustellen, dass die Spalten korrekt ausgerichtet sind*/
table, tr, th, td {
    border: 1px solid black;
    border-collapse: collapse;
}

/*Legen Sie Ihre Spalten fest, wo Sie sie haben möchten, lassen Sie diejenige aus, die Sie auf jede Breite setzen können*/
    th:nth-child(1), td:nth-child(1) {
    width: 85px;
}
th:nth-child(2), td:nth-child(2) {
    width: 150px;
}
th:nth-child(4), td:nth-child(4) {
    width: 125px;
}
th:nth-child(5) {
    width: 102px;
}
td:nth-child(5) {
    width: 85px;
}

Answer 5

In meinen Augen ist eines der besten Plugins für jQuery DataTables.

Es hat auch eine Erweiterung für feste Kopfzeile, und sie lässt sich sehr einfach implementieren.

Vom ihrer Seite genommen:

HTML:

            Name
            Position
            Office
            Age
            Start date
            Salary

            Name
            Position
            Office
            Age
            Start date
            Salary

            Tiger Nixon
            System Architect
            Edinburgh
            61
            2011/04/25
            $320,800

            Garrett Winters
            Accountant
            Tokyo
            63
            2011/07/25
            $170,750

            Ashton Cox
            Junior Technical Author
            San Francisco
            66
            2009/01/12
            $86,000

JavaScript:

$(document).ready(function() {
    var table = $('#example').DataTable();

    new $.fn.dataTable.FixedHeader( table );
} );

Aber das einfachste, was man für ein einfaches mit Scrollbalken haben kann, ist:

// Tabelle mit fester Kopfzeile und scrollenden Zeilen konfigurieren
$('#example').DataTable({
    scrollY: 400,
    scrollCollapse: true,
    paging: false,
    searching: false,
    ordering: false,
    info: false
});