Wie: Feste Tabellen-Kopfzeile mit EINER Tabelle (ohne jQuery)

Ich weiß, gibt es mindestens 3 Dutzend Fragen wie diese auf stackoverflow und trotzdem konnte ich nicht machen dies passieren:

Einer einfachen Tabelle, wo thead ist geklebt/befestigt an der Spitze, und der tbody gescrollt wird.
Ich versuchte, so viel in den letzten Tagen und nun bin ich hier gelandet, um Hilfe schreit.

Soll die Lösung funktioniert in IE8+ und die neueste FF, Chrome & Safari.
Der Unterschied zu anderen "mögliche Duplikate wie diese eine ist, dass ich nicht möchten, verwenden Sie zwei geschachtelte Tabellen oder jQuery (plain javascript ist gut, obwohl).

Demo von dem, was ich will:

http://www.imaputz.com/cssStuff/bigFourVersion.html.

Problem ist, es funktioniert nicht im IE, und ich wäre in Ordnung, um zu verwenden einige JS.

Nicht, dass seine relevanten technischen Diskussion hier, aber AFAICT dieser imaputz.com/cssStuff/bigFourVersion.html funktioniert auf IE10 OK (vielleicht in früheren Versionen von Kratern).
Sind Sie sicher, dass dieser funktioniert nicht in IE für Sie? Welche IE? Die verlinkte Seite sagt, es sollte funktionieren im IE6+.
es funktioniert nicht in IE8 (getestet mit IE10 im IE8-Modus).
es ist nicht - wie ich schon erwähnte, ich nicht wollen, verwenden Sie zwei geschachtelte Tabellen

InformationsquelleAutor ProblemsOfSumit | 2012-07-16

sticky tableheader

14

Ok ich habe es:

Müssen Sie wickeln Sie die Tabelle in zwei DIVs:
```
<div class="outerDIV">
  <div class="innerDIV">
    <table></table>
  </div>
</div>
```
CSS für die DIVs ist diese:
```
.outerDIV {
  position: relative;
  padding-top: 20px;   //height of your thead
}
.innerDIV {
  overflow-y: auto;
  height: 200px;       //the actual scrolling container
}
```
Der Grund dafür ist, dass Sie im Grunde machen die inneren DIV Scrollbar, und ziehen Sie den THEAD aus es durch kleben Sie es auf den äußeren DIV.

Nun kleben die thead zu den outerDIV, indem es
```
table thead {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
}
```
Den tbody muss display: block als gut.

Nun werden Sie feststellen, dass das scrollen funktioniert, aber die breiten sind völlig messep bis. Da ist Javascript in kommt.
Sie können wählen, auf Ihre eigenen, wie die, die Sie zuweisen möchten. Ich für mich selbst gab die TH ' s in der Tabelle eine Feste Breite und baute ein einfaches Skript, das die Breite und weist Sie der erste TD-Zeile in der tbody.

Etwas wie dies funktionieren sollte:
```
function scrollingTableSetThWidth(tableId)
{
    var table = document.getElementById(tableId);

    ths = table.getElementsByTagName('th');
    tds = table.getElementsByTagName('td');

    if(ths.length > 0) {
        for(i=0; i < ths.length; i++) {
            tds[i].style.width = getCurrentComputedStyle(ths[i], 'width');
        }
    }
}

function getCurrentComputedStyle(element, attribute)
{
    var attributeValue;
    if (window.getComputedStyle) 
    { //class A browsers
        var styledeclaration = document.defaultView.getComputedStyle(element, null);
        attributeValue = styledeclaration.getPropertyValue(attribute);
    } else if (element.currentStyle) { //IE
        attributeValue = element.currentStyle[vclToCamelCases(attribute)];
    }
    return attributeValue;
}
```
Mit jQuery das wäre natürlich viel einfacher, aber jetzt durfte ich nicht verwenden eine Drittanbieter-Bibliothek, die für dieses Projekt.
- Es sein sollte - nehmen Sie die erste TD-Zeile im tbody Breite und zuordnen th Breite, die andere Weise herum. ths[i].Stil.Breite = getCurrentComputedStyle(tds[i], 'width');
- Sicher, Sie können es tun, die andere Weise herum. In diesem speziellen Anwendungsfall, die ich hatte, es zu tun auf diese Weise, weil der Benutzer definiert die Breite des TH vor (dynamicly erstellte Tabelle), und es definiert die Breite der gesamten Tabelle
- ok, klingt wie seine diff use-cases, daher unterschiedlich gehandhabt.
- Sorry, aber ich wollte nicht verstehen, der 2. Funktion? was muss ich tun?
- legen Sie einfach die zweite Funktion irgendwo. Es ist von der ersten Funktion. Es werde berechnen, die berechneten CSS-Stile für ein bestimmtes element (das, natürlich, ist viel einfacher mit jQuery und ähnliches).
InformationsquelleAutor ProblemsOfSumit
-1

Vielleicht sollten wir ändern die Methode zum erreichen dieses Ziels.Wie:
```
<div><ul><li>1</li><li>2</li></ul></div> //make it fixed
<table>
    <thead>
        <tr><th>1</th><th>2</th></tr>
    </thead>
    <tfoot></tfoot>
    <tbody></tbody>
</table>
```
Natürlich, das ist nicht gut für sematic.Aber es ist der einfachste Weg, ohne js oder jq.
Glaubst du nicht so?
- Nein, ich nicht. Dein div braucht nicht fixiert zu werden. Es ist nicht Teil der scrollbaren Tabelle Körper. Die Breite wäre auch völlig falsch, im Vergleich zu der Zelle breiten. Ihre Antwort ist die gleiche wie Gandalfs unten und funktioniert nicht. Dies ist nicht möglich ohne JS.
- Sind Sie sicher? Gib mir deine email, und ich sende mein Beispiel Sie.
- Wenn Ihr talbe ist an der Spitze des Viewports, meine Lösung wird in Ordnung sein. Wenn nicht, stellen Sie die Anzeige der div keiner am start und machen es zu blockieren, wenn die talbe scolls an die Spitze und machen es keiner wieder, wenn die talbe nicht gesehen werden können. Natürlich, einige js verwendet werden soll.
- Erstellen Sie eine Beispiel auf jsfiddle.net. Es wird nicht funktionieren. Ich bin mir sicher.
- Ja,richtig. Sie können nun jsfiddle.net/JChen___/3fUFV, siehe mein Beispiel.
- toll. Zuerst von allen, ist Ihre Lösung bricht auseinander, wenn verwendet, in eine echte website, mit einem anderen Inhalt, text, Elemente und natürlich viele dieser Tabellen. Zweitens: deine Lösung ist nicht flexibel. 5 Tabellen mit unterschiedlicher Anzahl von Zeilen und Inhalten, und es bricht auseinander. Sie müssten angeben Breite individuell für jede Tabelle, die nicht eine akzeptable Lösung. Nehmen Sie jetzt 100 server generierten Tabellen. Sie können nicht verwenden Sie Ihre Lösung für dynamische und flexible layouts/contents/frameworks.
- Gute Analyse.Aber ich glaube, Sie alle können gelöst werden mit einigen einfachen js, obwohl ich nicht versuchen.
- Du hast Recht. Sie kann gelöst werden, mit einfachen JS. Mindestens eines davon hat. Finden Sie die akzeptierte Antwort für das Skript.
InformationsquelleAutor JChen___

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.