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

Ich habe es endlich richtig gemacht mit reinem CSS, indem ich diesen Anweisungen gefolgt bin:

http://tjvantoll.com/2012/11/10/creating-cross-browser-scrollable-tbody/

Der erste Schritt besteht darin, das auf display: block zu setzen, damit ein Überlauf und eine Höhe angewendet werden können. Von dort aus müssen die Zeilen im auf position: relative und display: block gesetzt werden, damit sie auf dem jetzt scrollbaren sitzen.

tbody, thead { display: block; overflow-y: auto; }

Weil das relativ positioniert ist, muss jede Tabellenzelle eine explizite Breite haben

td:nth-child(1), th:nth-child(1) { width: 100px; }
td:nth-child(2), th:nth-child(2) { width: 100px; }
td:nth-child(3), th:nth-child(3) { width: 100px; }

Aber leider reicht das nicht aus. Wenn eine Scrollleiste vorhanden ist, reservieren Browser dafür Platz. Daher hat das letztendlich weniger verfügbaren Platz als das . Beachten Sie die leichte Verschiebung, die dadurch entsteht...

Der einzige Workaround, den ich gefunden habe, war, auf allen Spalten außer der letzten eine min-width zu setzen.

td:nth-child(1), th:nth-child(1) { min-width: 100px; }
td:nth-child(2), th:nth-child(2) { min-width: 100px; }
td:nth-child(3), th:nth-child(3) { width: 100px; }

Gesamtes Codepen-Beispiel unten:

CSS:

.fixed_headers {
  width: 750px;
  table-layout: fixed;
  border-collapse: collapse;
}
.fixed_headers th {
  text-decoration: underline;
}
.fixed_headers th,
.fixed_headers td {
  padding: 5px;
  text-align: left;
}
.fixed_headers td:nth-child(1),
.fixed_headers th:nth-child(1) {
  min-width: 200px;
}
.fixed_headers td:nth-child(2),
.fixed_headers th:nth-child(2) {
  min-width: 200px;
}
.fixed_headers td:nth-child(3),
.fixed_headers th:nth-child(3) {
  width: 350px;
}
.fixed_headers thead {
  background-color: #333333;
  color: #fdfdfd;
}
.fixed_headers thead tr {
  display: block;
  position: relative;
}
.fixed_headers tbody {
  display: block;
  overflow: auto;
  width: 100%;
  height: 300px;
}
.fixed_headers tbody tr:nth-child(even) {
  background-color: #dddddd;
}
.old_ie_wrapper {
  height: 300px;
  width: 750px;
  overflow-x: hidden;
  overflow-y: auto;
}
.old_ie_wrapper tbody {
  height: auto;
}

Html:

      Name
      Color
      Description

      Apple
      Red
      These are red.

      Pear
      Green
      These are green.

      Grape
      Purple / Green
      These are purple and green.

      Orange
      Orange
      These are orange.

      Banana
      Yellow
      These are yellow.

      Kiwi
      Green
      These are green.

      Plum
      Purple
      These are Purple

      Watermelon
      Red
      These are red.

      Tomato
      Red
      These are red.

      Cherry
      Red
      These are red.

      Cantelope
      Orange
      These are orange inside.

      Honeydew
      Green
      These are green inside.

      Papaya
      Green
      These are green.

      Raspberry
      Red
      These are red.

      Blueberry
      Blue
      These are blue.

      Mango
      Orange
      These are orange.

      Passion Fruit
      Green
      These are green.

EDIT: Alternativlösung für Tabellenbreite 100% (oben ist eigentlich für feste Breite und beantwortet die Frage nicht):

HTML:

      Name
      Color
      Description

      Apple
      Red
      These are red.

      Pear
      Green
      These are green.

      Grape
      Purple / Green
      These are purple and green.

      Orange
      Orange
      These are orange.

      Banana
      Yellow
      These are yellow.

      Kiwi
      Green
      These are green.

CSS:

table {
  width: 100%;
  text-align: left;
  min-width: 610px;
}
tr {
  height: 30px;
  padding-top: 10px
}
tbody { 
  height: 150px; 
  overflow-y: auto;
  overflow-x: hidden;
}
th,td,tr,thead,tbody { display: block; }
td,th { float: left; }
td:nth-child(1),
th:nth-child(1) {
  width: 20%;
}
td:nth-child(2),
th:nth-child(2) {
  width: 20%;
  float: left;
}
td:nth-child(3),
th:nth-child(3) {
  width: 59%;
  float: left;
}
/* einige Farben */
thead {
  background-color: #333333;
  color: #fdfdfd;
}
table tbody tr:nth-child(even) {
  background-color: #dddddd;
}

Demo: http://codepen.io/anon/pen/bNJeLO

Answer 2

Das Hinzufügen einer festen Breite zu td,th nachdem tbody & thead blockweise angezeigt wurden, funktioniert perfekt und wir können auch das slimscroll Plugin verwenden, um die Scroll-Leiste schön zu gestalten.

     Scrollbare Tabelle 

        body {
            font-family: sans-serif;
            font-size: 0.9em;
        }
        table {
            border-collapse: collapse;
            border-bottom: 1px solid #ddd;
        }
        thead {
            background-color: #333;
            color: #fff;
        }
        thead,tbody {
            display: block;
        }
        th,td {
            padding: 8px 10px;
            border: 1px solid #ddd;
            width: 117px;
            box-sizing: border-box;
        }
        tbody {
            height: 160px;
            overflow-y: scroll
        }

            (...)

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

                 Zeile 1- Spalte 1 
                 Zeile 1- Spalte 2 
                 Zeile 1- Spalte 3 
                 Zeile 1- Spalte 4 

                 Zeile 2- Spalte 1 
                 Zeile 2- Spalte 2 
                 Zeile 2- Spalte 3 
                 Zeile 2- Spalte 4 

                 Zeile 3- Spalte 1 
                 Zeile 3- Spalte 2 
                 Zeile 3- Spalte 3 
                 Zeile 3- Spalte 4 

        $('.example-table tbody').slimscroll({
            height: '160px',
            alwaysVisible: true,
            color: '#333'
        })

Answer 3

Css-Umgehungslösung zur korrekten Anzeige von Spalten mit einem blockierenden tbody

Diese Lösung erfordert immer noch, dass die Breiten der th von jQuery berechnet und festgelegt werden

table.scroll tbody,
table.scroll thead { display: block; }

table.scroll tbody {
    overflow-y: auto;
    overflow-x: hidden;
    max-height: 300px;
}

table.scroll tr {
    display: flex;
}

table.scroll tr > td {
    flex-grow: 1;
    flex-basis: 0;
}

Und das Jquery / Javascript

var $table = $('#the_table_element'),
    $bodyCells = $table.find('tbody tr:first').children(),
    colWidth;

$table.addClass('scroll');

// Passen Sie die Breite der thead-Zellen an, wenn das Fenster neu dimensioniert wird
$(window).resize(function () {

    // Array mit der Breite der tbody-Spalten abrufen
    colWidth = $bodyCells.map(function () {
        return $(this).width();
    }).get();

    // Breite der thead-Spalten festlegen
    $table.find('thead tr').children().each(function (i, v) {
        $(v).width(colWidth[i]);
    });

}).resize(); // Auslösen des Resize-Handlers

Answer 4

Versuchen Sie den folgenden Ansatz, sehr einfach umzusetzen

Hier ist der jsfiddle link

http://jsfiddle.net/v2t2k8ke/2/

HTML:

CSS: #tbl_cnt{
 border-collapse: collapse; width: 100%;word-break:break-all;
 }
 #tbl_cnt thead, #tbl_cnt tbody{
 display: block;
 }
 #tbl_cnt thead tr{
 background-color: #8C8787; text-align: center;width:100%;display:block;
 }
 #tbl_cnt tbody {
 height: 100px;overflow-y: auto;overflow-x: hidden;
 }
Jquery: var data = [
    {
    "status":"moving","vehno":"tr544","loc":"bng","dri":"ttt"
    }, {
    "status":"stop","vehno":"tr54","loc":"che", "dri":"ttt"
    },{    "status":"idle","vehno":"yy5499999999999994","loc":"bng","dri":"ttt"
    },{
    "status":"moving","vehno":"tr544","loc":"bng", "dri":"ttt"
    }, {
    "status":"stop","vehno":"tr54","loc":"che","dri":"ttt"
    },{
    "status":"idle","vehno":"yy544","loc":"bng","dri":"ttt"
    }
    ];
   var sth = '';
   $.each(data[0], function (key, value) {
     sth += '';
   });
   var stb = '';        
   $.each(data, function (key, value) {
       stb += '';
       $.each(value, function (key, value) {
       stb += '';
       });
       stb += '';
    });
      $('#tbl_cnt thead tr').append(sth);
      $('#tbl_cnt tbody').append(stb);
      setTimeout(function () {
      var col_cnt=0 
      $.each(data[0], function (key, value) {col_cnt++;});    
      $('#tbl_cnt thead tr').css('width', ($("#tbl_cnt tbody") [0].scrollWidth)+ 'px');
      $('#tbl_cnt thead tr td,#tbl_cnt tbody tr td').css('width',  ($('#tbl_cnt thead tr ').width()/Number(col_cnt)) + 'px');}, 100)

' + key + '' + value + '

Answer 5

Dies ist der Code, der für mich funktioniert, um ein Sticky Thead in einer Tabelle mit einem scrollbaren Tbody zu erstellen:

table, tr, td {
    border: 1px solid red;
}
tbody {
    display: block;
    height: 50px;
    overflow: auto;
}
thead, tbody tr {
    display: table;
    width: 100%;
    table-layout: fixed; /* sogar Spaltenbreite, fixe Tabellenbreite */
}
thead {
    width: calc(100% - 1em); /* die Scrollleiste hat durchschnittlich eine Breite von 1em/16px, entfernen Sie sie von der Thead-Breite */
}
table {
    width: 400px;
}