Wie mache ich eine Tabelle scrollbar

Lesezeit: 4 Minuten

Benutzer-Avatar
Martin Kristiansen

Kennt jemand eine einfache Möglichkeit, den Körper einer Tabelle nur mit HTML und CSS scrollbar zu machen?

Die offensichtliche Lösung

tbody {
    height: 200px;
    overflow-y: scroll;
}

funktioniert nicht.

Wäre das nicht die offensichtliche Verwendung von Tabellen?

mache ich etwas falsch?

Benutzer-Avatar
Christoph

Sie müssen zuerst eine Höhe angeben, sonst wird Ihre Tabelle auf die entsprechende Breite ihres Inhalts erweitert.

table{
   overflow-y:scroll;
   height:100px;
   display:block;
}

BEARBEITEN: Nachdem ich Ihr Problem geklärt hatte, habe ich die Geige bearbeitet: Auschecken dieses Beispiel oder dieser Weg. Es ist ziemlich hacky und funktioniert nicht garantiert crossbrowser, könnte aber für Ihren Fall funktionieren.

  • was passiert mit dem thead Teil des Tisches?

    – Martin Kristiansen

    26. September 2012 um 8:53 Uhr

  • Verwenden display:block würde funktionieren, wäre aber im Allgemeinen nicht zu empfehlen, da der Browser es nicht mehr als Tabelle betrachten würde.

    – scoota269

    26. September 2012 um 8:55 Uhr

  • Das Beispiel soll dies lösen Verknüpfung –und ich möchte, dass der Header an Ort und Stelle bleibt

    – Martin Kristiansen

    26. September 2012 um 8:59 Uhr

  • @MartinKristiansen du meinst, du willst den Körper scrollen, während der Kopf fixiert bleibt? Mit reinem CSS geht das nicht.

    – Christoph

    26. September 2012 um 9:00 Uhr

  • @Christoph: Das möchte ich tun – und es scheint, als wären Tische genau dafür gemacht – aber so wie es aussieht, denke ich, dass Sie Recht haben.

    – Martin Kristiansen

    26. September 2012 um 9:01 Uhr

Mit einem Tisch geht das nicht. Wickeln Sie die Tabelle mit einem div ein, geben Sie ihm etwas wie:

div.wrapper {
    overflow:hidden;
    overflow-y: scroll;
    height: 100px; // change this to desired height
}

  • Das sollte funktionieren. Da die Erhöhung der Tabellenhöhe die Zeilenausrichtung dehnt.

    – Radioaktiv

    4. Januar 2019 um 19:34 Uhr

Sie können die Tabelle mit einem übergeordneten Element umschließen div und mache ihn scrollbar als scoota269 geraten:

.div_before_table {
    overflow:hidden;
    overflow-y: scroll;
    height: 500px;
}

Und um die zu behalten Tabellenkopf klebrig Sie können ein hinzufügen fixed Klasse:

.th.fixed {
    top: 0;
    z-index: 2;
    position: sticky;
    background-color: white;
 }

table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

td,
th {
  text-align: left;
  padding: 8px;
}

tr:nth-child(even) {
  background-color: #ddd;
}


/* The scrollable part */

.scrollable {
  height: 150px;
  overflow-y: scroll;
  border-bottom: 1px solid #ddd;
}

th {
  position: sticky;
  background-color: white;
  z-index: 2;
  top: 0;
}
<div class="scrollable">
  <table>
    <tr>
      <th>Company</th>
      <th>Contact</th>
      <th>Country</th>
    </tr>
    <tr>
      <td>Alfreds Futterkiste</td>
      <td>Maria Anders</td>
      <td>Germany</td>
    </tr>
    <tr>
      <td>Centro comercial Moctezuma</td>
      <td>Francisco Chang</td>
      <td>Mexico</td>
    </tr>
    <tr>
      <td>Centro comercial Moctezuma</td>
      <td>Francisco Chang</td>
      <td>Mexico</td>
    </tr>
    <tr>
      <td>Centro comercial Moctezuma</td>
      <td>Francisco Chang</td>
      <td>Mexico</td>
    </tr>
    <tr>
      <td>Ernst Handel</td>
      <td>Roland Mendel</td>
      <td>Austria</td>
    </tr>
    <tr>
      <td>Island Trading</td>
      <td>Helen Bennett</td>
      <td>UK</td>
    </tr>
    <tr>
      <td>Laughing Bacchus Winecellars</td>
      <td>Yoshi Tannamuri</td>
      <td>Canada</td>
    </tr>
    <tr>
      <td>Magazzini Alimentari Riuniti</td>
      <td>Giovanni Rovelli</td>
      <td>Italy</td>
    </tr>
  </table>
</div>

  • Das ist nicht genau genug. Ich verwende einen Farbverlauf für die Hintergrundfarbe des Tabellenkopfes. Mit th wird die Farbe von links nach rechts für jede Spalte des Tabellenkopfs wiederholt.

    – Paket.JSON

    24. Februar 2021 um 10:27 Uhr

  • Danke, Mann! Du hast meinen Tag gerettet!!! ( ͡° ͜ʖ ͡°)

    – Frontend

    24. Oktober 2021 um 11:32 Uhr

Benutzer-Avatar
RMN

Willst du so etwas?

Reine CSS-Scrollable-Tabelle mit festem Header (1)

http://anaturb.net/csstips/sheader.htm

http://www.scientificpsychic.com/blogentries/html-and-css-scrolling-table-with-fixed-heading.html

1059450cookie-checkWie mache ich eine Tabelle scrollbar

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

Privacy policy