Fester Tabellenkopf und scrollbarer Körper

Lesezeit: 16 Minuten

Fester Tabellenkopf und scrollbarer Korper
julio

Ich versuche, mit der Bootstrap 3-Tabelle eine Tabelle mit festem Header und scrollbarem Inhalt zu erstellen. Leider funktionieren die Lösungen, die ich gefunden habe, nicht mit Bootstrap oder bringen den Stil durcheinander.

Hier gibt es eine einfache Bootstrap-Tabelle, aber aus irgendeinem mir unbekannten Grund beträgt die Höhe des Tbody nicht 10 Pixel.

height: 10px !important; overflow: scroll;

Beispiel:

<link rel="stylesheet" type="text/css" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">

<table class="table table-striped">
    <thead>
    <tr>
        <th>Make</th>
        <th>Model</th>
        <th>Color</th>
        <th>Year</th>
    </tr>
    </thead>
    <tbody style="height: 10px !important; overflow: scroll; ">
    <tr>
        <td class="filterable-cell">111 Ford</td>
        <td class="filterable-cell">Escort</td>
        <td class="filterable-cell">Blue</td>
        <td class="filterable-cell">2000</td>
    </tr>
    <tr>
        <td class="filterable-cell">Ford</td>
        <td class="filterable-cell">Escort</td>
        <td class="filterable-cell">Blue</td>
        <td class="filterable-cell">2000</td>
    </tr>
            <tr>
        <td class="filterable-cell">Ford</td>
        <td class="filterable-cell">Escort</td>
        <td class="filterable-cell">Blue</td>
        <td class="filterable-cell">2000</td>
    </tr>
     <tr>
        <td class="filterable-cell">Ford</td>
        <td class="filterable-cell">Escort</td>
        <td class="filterable-cell">Blue</td>
        <td class="filterable-cell">2000</td>
    </tr>
    </tbody>
    
</table>

  • Hilft das? stackoverflow.com/a/17380697/1725764

    – Hashem Qolami

    16. Januar 2014 um 17:20 Uhr

  • Das hat mir auf jeden Fall weitergeholfen. Hier die Lösung jsfiddle.net/T9Bhm/7 Danke

    – Julio

    16. Januar 2014 um 23:30 Uhr

  • Behandelt das Table-Striped-Attribut nicht korrekt, wenn die td-Höhen nicht übereinstimmen. jsfiddle.net/T9Bhm/4755 Siehe das hinzugefügte td { overflow-wrap: break-word; }, die ich hinzugefügt habe

    – John Zabroski

    20. Juni 2016 um 20:24 Uhr

  • Ich denke, ein besserer und älterer SO-Thread ist als Duplikat von diesem markiert: p stackoverflow.com/questions/17067294/…

    – DevLoverUmar

    15. Juli 2020 um 10:25 Uhr

  • Beantwortet das deine Frage? Wie erstelle ich eine HTML-Tabelle mit einer festen/eingefrorenen linken Spalte und einem scrollbaren Körper?

    – Gary

    19. November 2020 um 15:17 Uhr

Fester Tabellenkopf und scrollbarer Korper
Roko C. Buljan

Fester Tabellenkopf – nur CSS

Einfach position: sticky; top: 0; dein th Elemente. (Chrom, FF, Kante)

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

/* Just common table stuff. Really. */
table  { border-collapse: collapse; width: 100%; }
th, td { padding: 8px 16px; }
th     { background:#eee; }
<div class="tableFixHead">
  <table>
    <thead>
      <tr><th>TH 1</th><th>TH 2</th></tr>
    </thead>
    <tbody>
      <tr><td>A1</td><td>A2</td></tr>
      <tr><td>B1</td><td>B2</td></tr>
      <tr><td>C1</td><td>C2</td></tr>
      <tr><td>D1</td><td>D2</td></tr>
      <tr><td>E1</td><td>E2</td></tr>
    </tbody>
  </table>
</div>

Für beide klebrige vertikale TH- und horizontale TH-Spalten (innen 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; }

/* Just common table stuff. Really. */
table  { border-collapse: collapse; width: 100%; }
th, td { padding: 8px 16px; white-space: nowrap; }
th     { background:#eee; }
<div class="tableFixHead">
  <table>
    <thead>
      <tr><th></th><th>TH 1</th><th>TH 2</th></tr>
    </thead>
    <tbody>
            <tr><th>Foo</th><td>Some long text lorem ipsum</td><td>Dolor sit amet</td></tr>
            <tr><th>Bar</th><td>B1</td><td>B2</td></tr>
            <tr><th>Baz</th><td>C1</td><td>C2</td></tr>
            <tr><th>Fuz</th><td>D1</td><td>D2</td></tr>
            <tr><th>Zup</th><td>E1</td><td>E2</td></tr>
    </tbody>
  </table>
</div>

Problem mit TH-Grenzen behoben

Seit border kann nicht richtig auf eine übersetzte gemalt werden TH -Element, um es neu zu erstellen und zu rendern “Grenzen” benutze die box-shadow Eigentum:

/* Borders (if you need them) */
.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; }

/* Just common table stuff. Really. */
table  { border-collapse: collapse; width: 100%; }
th, td { padding: 8px 16px; }
th     { background:#eee; }

/* Borders (if you need them) */
.tableFixHead,
.tableFixHead td {
  box-shadow: inset 1px -1px #000;
}
.tableFixHead th {
  box-shadow: inset 1px 1px #000, 0 1px #000;
}
<div class="tableFixHead">
  <table>
    <thead>
      <tr><th>TH 1</th><th>TH 2</th></tr>
    </thead>
    <tbody>
      <tr><td>A1</td><td>A2</td></tr>
      <tr><td>B1</td><td>B2</td></tr>
      <tr><td>C1</td><td>C2</td></tr>
      <tr><td>D1</td><td>D2</td></tr>
      <tr><td>E1</td><td>E2</td></tr>
    </tbody>
  </table>
</div>

Fester Tischkopf – mit JS. (IE)

Sie können ein bisschen JS verwenden und übersetzenY der th Elemente

jQuery-Beispiel

var $th = $('.tableFixHead').find('thead th')
$('.tableFixHead').on('scroll', function() {
  $th.css('transform', 'translateY('+ this.scrollTop +'px)');
});
.tableFixHead { overflow-y: auto; height: 100px; }

/* Just common table stuff. */
table  { border-collapse: collapse; width: 100%; }
th, td { padding: 8px 16px; }
th     { background:#eee; }
<div class="tableFixHead">
  <table>
    <thead>
      <tr><th>TH 1</th><th>TH 2</th></tr>
    </thead>
    <tbody>
      <tr><td>A1</td><td>A2</td></tr>
      <tr><td>B1</td><td>B2</td></tr>
      <tr><td>C1</td><td>C2</td></tr>
      <tr><td>D1</td><td>D2</td></tr>
      <tr><td>E1</td><td>E2</td></tr>
    </tbody>
  </table>
</div>

<script src="https://code.jquery.com/jquery-3.1.0.js"></script>

Oder einfach ES6, wenn Sie es vorziehen (kein jQuery erforderlich):

// Fix table head
function tableFixHead (e) {
    const el = e.target,
          sT = el.scrollTop;
    el.querySelectorAll("thead th").forEach(th => 
      th.style.transform = `translateY(${sT}px)`
    );
}
document.querySelectorAll(".tableFixHead").forEach(el => 
    el.addEventListener("scroll", tableFixHead)
);

  • @Roko vielen Dank für die Bereitstellung einer so sauberen Lösung, sie funktioniert wie ein Charme in Chrom. Leider funktioniert dies nicht im IE11. Gibt es eine Optimierung, damit es in IE11 funktioniert?

    – AP

    23. November 2018 um 19:37 Uhr


  • @AP für IE11 (da es nicht versteht klebrig) könnten Sie das zweite Beispiel verwenden, das verwendet translateY (und den jQuery-Code – wenn Sie Ihren ES6 js-Code nicht kompilieren). Es wird funktionierenwird aber ein bisschen aussehen “springen”. Aber das ist in Ordnung. Wenn jemand veraltete Browser verwenden möchte, wird sich eine solche Person / Firma niemals über abgehackte Dinge beschweren – sofern sie den Inhalt sehen und eine anständige Interaktion mit Ihrer Website haben kann. Interessantes Vorlesen: nealbuerger.com/2018/01/the-end-of-life-of-internet-explorer-11

    – Roko C. Buljan

    24. November 2018 um 15:55 Uhr


  • Funktioniert nicht, wenn der Tabellenkopf mehr als eine Zeile enthält. Beim Scrollen springt die 2. Kopfzeile nach oben und legt sich über die erste, da beide “top:0” haben. Habe daran herumgebastelt, das gesamte

    klebrig zu machen, konnte es aber nicht zum Laufen bringen. Irgendwelche Ideen für mehrzeilige Header (mit colspans zum Booten)?

    – Benutzer3191192

    29. Mai 2019 um 18:03 Uhr

  • Wenn die obere Lösung von { position: sticky; top: 0; } funktioniert irgendwie nicht in deinem Code – überprüfe das overflow-x und overflow-y css-Eigenschaften enthaltender Elemente, insbesondere table, thead, tr. Überläufe, überraschenderweise beide, dürfen nicht gesetzt werden. Möglicherweise müssen Sie dies explizit tun unset Ihnen. Weitere Informationen – stackoverflow.com/a/54806576/882936

    – Iwan Koschelev

    28. September 2019 um 19:46 Uhr

  • @RokoCBuljan Ja. Die erste Lösung in Ihrer Antwort funktionierte nicht in meinem Code, bis ich sie durchgegangen und überprüft habe overflows auf übergeordnete Tabellenelemente, wie im verlinkten Kommentar beschrieben. In der Hoffnung, zukünftigen Lesern ein paar Stunden der Erkundung zu ersparen 😉

    – Iwan Koschelev

    30. September 2019 um 11:23 Uhr

Wahrscheinlich erhalten Sie mehrere Tabellen auf einer Seite, daher benötigen Sie CSS-Klassen. Bitte finden Sie dafür eine modifizierte Lösung von @giulio.

Deklarieren Sie es einfach in der Tabelle:

<table class="table table-striped header-fixed"></table>

CSS

.header-fixed {
    width: 100% 
}

.header-fixed > thead,
.header-fixed > tbody,
.header-fixed > thead > tr,
.header-fixed > tbody > tr,
.header-fixed > thead > tr > th,
.header-fixed > tbody > tr > td {
    display: block;
}

.header-fixed > tbody > tr:after,
.header-fixed > thead > tr:after {
    content: ' ';
    display: block;
    visibility: hidden;
    clear: both;
}

.header-fixed > tbody {
    overflow-y: auto;
    height: 150px;
}

.header-fixed > tbody > tr > td,
.header-fixed > thead > tr > th {
    width: 20%;
    float: left;
}

Beachten Sie, dass die aktuelle Implementierung nur für fünf Spalten geeignet ist. Wenn Sie eine andere Nummer benötigen, ändern Sie die Breite Parameter ab 20% bis *100 % / Anzahl_Spalten*.

  • Nachdem ich all die verschiedenen komplexen Lösungen befolgt habe, finde ich, dass dies die beste Lösung ist. Die vertikale Bildlaufleiste hat jedoch eine gewisse Breite (was offensichtlich ist), aber aufgrund dessen gibt es eine leichte Fehlanpassung zwischen den Kopfzeilen und den Zeilen. Ich habe 7 Spalten, also habe ich die Breite nach der Berechnung mit der Erwähnungsformel auf 14,28 % eingestellt

    – Chetan

    25. Februar 2015 um 12:48 Uhr


  • Wie würde ich jeder Spalte eine bestimmte Breite zuweisen?

    – Benutzer1807271

    27. Mai 2015 um 14:28 Uhr

  • @ user1807271 Sie können die Breite jeder Spalte über JS zuweisen oder eine spaltenweise Klasse (z. B. “col1”, “col2” usw.) mit der benötigten Breite erstellen und allen Zellen in der ersten Spalte die Klasse “col1” zuweisen , “col2” mit dem zweiten usw.

    – Lukas

    1. September 2015 um 13:33 Uhr

  • Ich schlage vor, Sie hinzufügen .header-fixed > thead > tr > th{white-space: nowrap;} auch. Wenn Kopfzeilen anfangen zu umbrechen, bringt das alles durcheinander

    – Omar Wagih

    6. April 2016 um 10:16 Uhr

Fester Tabellenkopf und scrollbarer Korper
julio

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;
}
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet"/>

<table class="table table-striped">
    <thead>
        <tr>
            <th>Make</th>
            <th>Model</th>
            <th>Color</th>
            <th>Year</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class="filterable-cell">Ford</td>
            <td class="filterable-cell">Escort</td>
            <td class="filterable-cell">Blue</td>
            <td class="filterable-cell">2000</td>
        </tr>
        <tr>
            <td class="filterable-cell">Ford</td>
            <td class="filterable-cell">Escort</td>
            <td class="filterable-cell">Blue</td>
            <td class="filterable-cell">2000</td>
        </tr>
        <tr>
            <td class="filterable-cell">Ford</td>
            <td class="filterable-cell">Escort</td>
            <td class="filterable-cell">Blue</td>
            <td class="filterable-cell">2000</td>
        </tr>
        <tr>
            <td class="filterable-cell">Ford</td>
            <td class="filterable-cell">Escort</td>
            <td class="filterable-cell">Blue</td>
            <td class="filterable-cell">2000</td>
        </tr>
    </tbody>
</table>

Link zu jsfiddle

  • Funktioniert nicht in IE9 (und wahrscheinlich anderen); erfordert Spalten mit fester Breite (und es gibt viel einfachere, browserübergreifende Lösungen, wenn Sie Spalten mit fester Breite verwenden möchten); bricht schlecht ab, wenn der Inhalt die feste Breite überschreitet; ordnet die Überschriften und Spalten nicht wirklich an (Sie können es in sehen die oben verlinkte Geige; es ist klarer diese Version das gibt ihnen eine einfache Grenze), obwohl das wahrscheinlich behoben werden könnte; Die Bildlaufleiste ist nicht ganz mit dem Körper der Tabelle ausgerichtet …

    – TJ Crowder

    21. Juni 2014 um 12:22 Uhr

  • Fügen Sie td und th einen sichtbaren Rand hinzu, und Sie werden sehen, dass die Breite von td nicht mit der Breite von th übereinstimmt

    – Apolo

    28. Oktober 2014 um 13:26 Uhr

  • Das Problem bei dieser Lösung ist, dass sie eine feste Höhe erfordert. Das wird nicht funktionieren, wo responsives Design ins Spiel kommt. Ich habe an einer Lösung gearbeitet, die position: fixed verwendet, was das Scrollproblem löst, aber die Zeilenbreiten durcheinander bringt.

    – Jeffrey A. Gochin

    7. September 2015 um 0:05 Uhr

  • Sie können die td-Breite manuell so korrigieren, dass sie nicht mit der th-Breite übereinstimmt, indem Sie die Breiten-%-Angabe für td und th trennen und th einfach etwas schmaler einstellen. Sie müssen es jedes Mal benutzerdefiniert machen, aber das sollte nicht so oft verwendet werden.

    – Ben Hoffmann

    28. Juli 2016 um 15:51 Uhr

  • Hatte ein Problem mit dieser Lösung in der Kopfzeile: Die Kopfzeilenrolle kann nur nicht mehr als 4 Spalten haben, und eine neue Zeile wird aufgerufen, wenn Sie mehr als 4 Spalten haben. * Sie müssen die Breite % an Ihre entsprechende Zeilennummer anpassen *

    – Jason Akon

    11. März 2021 um 3:19 Uhr


Fester Tabellenkopf und scrollbarer Korper
Rosdi Kasim

Aktualisieren

Versuchen Sie es mit einer neueren und noch gepflegten Bibliothek jquery.floatThead (wie von Bob Jordan im Kommentar erwähnt) stattdessen.

Alte Antwort

Dies ist eine sehr alte Antwort, die unten erwähnte Bibliothek wird nicht mehr gepflegt.

ich benutze StickyTableHeader auf GitHub und es funktioniert wie am Schnürchen!

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

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

1646259132 800 Fester Tabellenkopf und scrollbarer Korper
Benard Patrick

Brauchen Sie nicht, es in ein Div zu wickeln …

CSS:

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

table{
 height:300px;              // <-- Select the height of the table
 display: block;
}
tbody{
  overflow-y: scroll;      
  height: 200px;            //  <-- Select the height of the body
  width: 100%;
  position: absolute;
}

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

  • Das sieht gut aus, bis Sie feststellen, dass die Spaltendaten dieselbe Breite haben müssen. Wenn nicht, passen die Daten nicht unter die Überschriften.

    – Tmac

    17. Februar 2015 um 19:44 Uhr

  • Diese Lösung funktioniert nicht, wenn einzelne Zellen überlaufen.

    – John Zabroski

    20. Juni 2016 um 20:18 Uhr

  • Was ist, wenn ich keine Schriftrolle haben möchte?

    – Dejell

    22. August 2016 um 13:08 Uhr

  • Dies funktioniert nicht in Chrome, weder das Bootply noch die Lösung.

    – Kevin

    7. April 2017 um 10:11 Uhr

  • Nur als Kommentar, es funktioniert für mich in Chrome, die Tabelle befindet sich oben in der Mitte des Seiteninhalts…. Können Sie weitere Informationen bereitstellen? (Ich bin auf Linux)

    – BENEARD Patrick

    25. März 2019 um 11:11 Uhr

1641831502 23 Laravel 51 Enumeration des unbekannten Datenbanktyps angefordert
simsek

Einfacher geht es mit CSS

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

  • Das sieht gut aus, bis Sie feststellen, dass die Spaltendaten dieselbe Breite haben müssen. Wenn nicht, passen die Daten nicht unter die Überschriften.

    – Tmac

    17. Februar 2015 um 19:44 Uhr

  • Diese Lösung funktioniert nicht, wenn einzelne Zellen überlaufen.

    – John Zabroski

    20. Juni 2016 um 20:18 Uhr

  • Was ist, wenn ich keine Schriftrolle haben möchte?

    – Dejell

    22. August 2016 um 13:08 Uhr

  • Dies funktioniert nicht in Chrome, weder das Bootply noch die Lösung.

    – Kevin

    7. April 2017 um 10:11 Uhr

  • Nur als Kommentar, es funktioniert für mich in Chrome, die Tabelle befindet sich oben in der Mitte des Seiteninhalts…. Können Sie weitere Informationen bereitstellen? (Ich bin auf Linux)

    – BENEARD Patrick

    25. März 2019 um 11:11 Uhr

1646259133 292 Fester Tabellenkopf und scrollbarer Korper
St. Johannes

Bei weitem die beste Lösung, die ich gesehen habe, ist nur CSS, mit gute Cross-Browser-Unterstützungund keine Ausrichtungsprobleme 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;
}

  • Ich habe diese für die viel höher bewertete Antwort von @Roko C. Buljan unten übersprungen, nur um festzustellen, dass diese Antwort nicht funktionierte, wenn der Header mehrere Zeilen hatte. Diese Lösung funktioniert super. Ich danke dir sehr!!!

    – shao.lo

    23. September 2020 um 1:22 Uhr

  • Keine Ahnung, ob es daran liegt, dass sich meine Tabelle in einem verschachtelten Rasterlayout befindet oder daran, dass die Tabelle wirklich breit ist, aber dies erzeugt das bizarrste Rendering auf meiner Tabelle – es ist, als wäre jede Spalte ein paar Pixel nach rechts versetzt, also fast jede Spalte überschreibt die vorherige, was zu einem sehr fehlerhaften Aussehen führt

    – Michael

    7. Dezember 2020 um 17:49 Uhr

  • Dies funktioniert nicht, wenn Sie verwenden möchten <colgroup><col style="width: 10px;"><col style="width: 100px;"></colgroup> um die Breite der Spalten Ihrer Tabelle zu verwalten – alle Ihre Einstellungen werden ignoriert.

    – izogfif

    10. Dezember 2020 um 14:28 Uhr

  • habe das Colgroup-Problem mit umgangen .table-scroll th:nth-child(1), .table-scroll td:nth-child(1) { width: 3%; } für n Spalten

    – Tom Shelley

    17. September 2021 um 18:30 Uhr

916650cookie-checkFester Tabellenkopf und scrollbarer Körper

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy