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

Versuchen Sie dieses jsfiddle. Dies basiert auf jQuery und wurde aus der Antwort von Hashem Qolami erstellt. Zuerst erstellen Sie eine normale Tabelle und machen sie dann scrollbar.

const makeScrollableTable = function (tableSelector, tbodyHeight) {
  let $table = $(tableSelector);
  let $bodyCells = $table.find('tbody tr:first').children();
  let $headCells = $table.find('thead tr:first').children();
  let headColWidth = 0;
  let bodyColWidth = 0;

  headColWidth = $headCells.map(function () {
    return $(this).outerWidth();
  }).get();
  bodyColWidth = $bodyCells.map(function () {
    return $(this).outerWidth();
  }).get();

  $table.find('thead tr').children().each(function (i, v) {
    $(v).css("width", headColWidth[i]+"px");
    $(v).css("min-width", headColWidth[i]+"px");
    $(v).css("max-width", headColWidth[i]+"px");
  });
  $table.find('tbody tr').children().each(function (i, v) {
    $(v).css("width", bodyColWidth[i]+"px");
    $(v).css("min-width", bodyColWidth[i]+"px");
    $(v).css("max-width", bodyColWidth[i]+"px");
  });

  $table.find('thead').css("display", "block");
  $table.find('tbody').css("display", "block");

  $table.find('tbody').css("height", tbodyHeight+"px");
  $table.find('tbody').css("overflow-y", "auto");
  $table.find('tbody').css("overflow-x", "hidden");

};

Dann können Sie diese Funktion wie folgt benutzen:

makeScrollableTable('#test-table', 250);

Answer 2

Um "overflow: scroll" zu verwenden, müssen Sie "display: block" für thead und tbody setzen. Das beeinträchtigt jedoch die Spaltenbreiten zwischen ihnen. Aber dann können Sie die thead-Reihe mit Javascript klonen und in den tbody als eine versteckte Reihe einfügen, um die genauen Spaltenbreiten beizubehalten.

$('.myTable thead > tr')
    .clone()
    .appendTo('.myTable tbody')
    .addClass('hidden-to-set-col-widths')
;

http://jsfiddle.net/Julesezaar/mup0c5hk/

                Problem
                Lösung
                blah
                derp

      Einige Texte hier

Das css:

    table {
      background-color: #aaa;
      width: 100%;
    }

    thead,
    tbody {
      display: block; // Erforderlich für overflow: scroll
    }

    tbody {
      background-color: #ddd;
      height: 150px;
      overflow-y: scroll;
    }

    tbody tr.hidden-to-set-col-widths,
    tbody tr.hidden-to-set-col-widths td {
      visibility: hidden;
      height: 0;
      line-height: 0;
      padding-top: 0;
      padding-bottom: 0;
    }

    td {
      padding: 3px 10px;
    }