wake-up-neo.net

Wie scrollen Sie den "Körper" der Tabelle unabhängig von "thead"?

Wie angegeben hier :

Tabellenzeilen können in einen Tabellenkopf, einen Tabellenfuß und einen oder .__ gruppiert werden. Weitere Tabellenkörperbereiche mit den Elementen THEAD, TFOOT und TBODY beziehungsweise. Diese Abteilung ermöglicht es Benutzeragenten, Bildlauf zu unterstützen von Tischkörpern unabhängig von Tischkopf und -fuß.

Ich habe das folgendes Beispiel erstellt, aber es funktioniert nicht.

HTML:

<table>
    <thead>
        <tr>
            <td>Problem</td>
            <td>Solution</td>
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>

JS:

$(function() {
    for (var i = 0; i < 20; i++) {
        var a = Math.floor(10 * Math.random());
        var b = Math.floor(10 * Math.random());
        var row = $("<tr>").append($("<td>").html(a + " + " + b + " ="))
                           .append($("<td>").html(a + b));
        $("tbody").append(row);
    }
});

CSS:

table {
    background-color: #aaa;
}
tbody {
    background-color: #ddd;
    height: 100px;
    overflow: auto;
}
td {
    padding: 3px 10px;
}
56
Misha Moroshko

Der fehlende Teil ist:

thead, tbody {
    display: block;
}

Demo

46
bookcasey

Ich habe diesen Beitrag vor etwa einem Monat gesehen, als ich ähnliche Probleme hatte. Ich brauchte ein y-Achsen-Scrollen für eine Tabelle innerhalb eines UI-Dialogs (ja, Sie haben mich richtig gehört). Ich hatte Glück, dass sich eine funktionierende Lösung ziemlich schnell ergab. Es dauerte jedoch nicht lange, bis die Lösung ein Eigenleben entwickelte, aber dazu später mehr.

Das Problem beim Festlegen der Elemente der obersten Ebene (des Kopfes, des Fußes und des Körpers) für die Anzeige von Block ist das Problem, dass die Browsersynchronisierung der Spaltengrößen zwischen den verschiedenen Komponenten schnell verloren geht und alles auf die kleinste zulässige Größe passt. Das Festlegen der Spaltenbreiten scheint die beste Vorgehensweise zu sein. Wenn Sie jedoch die Breite aller internen Tabellenkomponenten nicht an die Summe dieser Spalten anpassen möchten, besteht selbst bei einem festen Tabellenlayout eine leichte Divergenz zwischen den Kopfzeilen und dem Hauptteil wenn eine Bildlaufleiste vorhanden ist.

Die Lösung für mich bestand darin, alle Breiten festzulegen, zu überprüfen, ob eine Bildlaufleiste vorhanden war, und dann die skalierten Breiten zu verwenden, für die der Browser tatsächlich entschieden hatte, und diese in die Kopf- und Fußzeile zu kopieren, wobei die letzte Spaltenbreite an die Größe der angepasst wurde Scrollleiste. Dadurch wird die Säulenbreite etwas fließender. Wenn Änderungen an der Breite der Tabelle vorgenommen werden, skalieren die meisten großen Browser die Breite der Bodyspalten entsprechend. Jetzt müssen Sie nur noch die Spaltenbreite der Kopf- und Fußzeile aus der jeweiligen Körpergröße festlegen.

$table.find("> thead,> tfoot").find("> tr:first-child")
    .each(function(i,e) {
        $(e).children().each(function(i,e) {
            if (i != column_scaled_widths.length - 1) {
                $(e).width(column_scaled_widths[i] - ($(e).outerWidth() - $(e).width()));
            } else {
                $(e).width(column_scaled_widths[i] - ($(e).outerWidth() - $(e).width()) + $.position.scrollbarWidth());
            }
        });
    });

Diese Geige veranschaulicht diese Begriffe: http://jsfiddle.net/borgboyone/gbkbhngq/ .

Beachten Sie, dass ein Tabellen-Wrapper oder zusätzliche Tabellen für das Scrollen der y-Achse allein nicht erforderlich sind. (Für das Scrollen der X-Achse ist eine Umhüllungstabelle erforderlich.) Die Synchronisierung zwischen den Spaltengrößen für Text und Kopfzeile geht immer noch verloren, wenn die minimale Packungsgröße für die Kopf- oder Hauptspalte gefunden wird. Ein Mechanismus für minimale Breiten sollte bereitgestellt werden, wenn die Größenänderung eine Option ist oder kleine Tabellenbreiten erwartet werden.

Der ultimative Höhepunkt von diesem Ausgangspunkt aus ist hier voll verwirklicht: http://borgboyone.github.io/jquery-ui-table/

EIN.

1
Borgboy

versuche dies.

table 
{
    background-color: #aaa;
}

tbody 
{
    background-color: #ddd;
    height: 100px;
    overflow-y: scroll;
    position: absolute;
}

td 
{
    padding: 3px 10px;
    color: green;
    width: 100px;
}
1
Bhimbim

obligatorische Teile:

tbody {
    overflow-y: scroll;  (could be: 'overflow: scroll' for the two axes)
    display: block;
    with: xxx (a number or 100%)
}

thead {
    display: inline-block;
}
0
freignat
thead {
  position: fixed;
  height: 10px; /* This is whatever height you want */
}
  tbody {
  position: fixed;
  margin-top: 10px; /* This has to match the height of thead */
  height: 300px; /* This is whatever height you want */
}
0
John K. Chow