Tabelle - feste Kopfzeile, scrollbare Körper, robusteste/einfache Lösung?

Mögliche Duplizieren:
HTML table with fixed headers?Tabelle - feste Kopfzeile, scrollbare Körper, robusteste/einfache Lösung?

die Suche nach einer Lösung, die eine Tabelle mit einem rollbaren Körper zu schaffen, und ein statischen/festen Header.

lange Suche scheint VIELE flockig Teile des Codes, entweder nicht funktioniert in IE, erfordert eine riesige Menge von Javascript und Zwicken, oder eine dumme Menge von CSS-Hacks zu produzieren usw.

ehrlich zu sein, wenn Es ist ein Fall von CSS-Hacks oder Javascript, ich denke, ich würde lieber die Javascript-Option gehen.

Die Alternative Ich denke, es ist alles in einem div zu platzieren, und nur die gesamte Tabelle bewegen - aber das ist ein bisschen geschmacklos: D

Quelle

2009-08-19 Nick

Dup: http://stackoverflow.com/questions/673153/html-table-with-fixed-headers –

<table style="width: 300px" cellpadding="0" cellspacing="0"> 
<tr> 
    <td>Column 1</td> 
    <td>Column 2</td> 
</tr> 
</table> 

<div style="overflow: auto;height: 100px; width: 320px;"> 
    <table style="width: 300px;" cellpadding="0" cellspacing="0"> 
    <tr> 
    <td>Value 1</td> 
    <td>Value 2</td> 
    </tr> 
    <tr> 
    <td>Value 1</td> 
    <td>Value 2</td> 
    </tr> 
    <tr> 
    <td>Value 1</td> 
    <td>Value 2</td> 
    </tr> 
    <tr> 
    <td>Value 1</td> 
    <td>Value 2</td> 
    </tr> 
    <tr> 
    <td>Value 1</td> 
    <td>Value 2</td> 
    </tr> 
    <tr> 
    <td>Value 1</td> 
    <td>Value 2</td> 
    </tr> 
    </table> 
</div>

Dies erstellt eine feste Spaltenüberschrift mit der scrollbaren Tabelle darunter. Der Trick besteht darin, die Tabelle, die Sie durchsuchen möchten, in ein Tag einzubetten, dessen Überlaufattribut auf auto festgelegt ist. Dadurch wird der Browser gezwungen, eine Bildlaufleiste anzuzeigen, wenn der Inhalt der inneren Tabelle größer als die Höhe der Umgebung ist.

Die Breite des äußeren muss größer als die Breite sein, wenn der innere Tisch für die Bildlaufleiste angepasst werden soll. Dies kann schwierig sein, genau richtig zu sein, da einige Benutzer ihre Bildlaufleisten möglicherweise breiter oder kleiner als die Standardeinstellung eingestellt haben. Mit einem Unterschied von etwa 20 bis 30 Pixeln können Sie die Bildlaufleiste jedoch gut darstellen.

CSS-Tricks spricht auch über die Verwendung von JavaScript und CSS, um auch dies zu helfen, so dass Sie markieren können. Hier ist der Link zu diesem article.

Quelle

2009-08-19 16:26:10 Dennis

Während dies funktioniert, ist es nicht so toll aus einer Zugänglichkeit Sicht. Es gibt keine Tabellenüberschriften () und selbst wenn sie vorhanden wären, wären sie nicht explizit den relevanten Spalten zugeordnet, da die Tabelle in zwei Tabellen aufgeteilt ist. –

Dies ist wirklich genau richtig, wenn ich manuell die Breite jeder Spalte definieren - wie PMC sagte, vielleicht nicht ideal von der Zugänglichkeit, aber all die Lösungen, die ich gesehen habe, ist dies durch * far * mein Favorit, vielen Dank viel! – Nick

Wenn Ihr Tisch dicht gepackt ist, scheint dies nicht richtig zu sein. – quillbreaker

Ich glaube, dass die Lösung eine explizite Höhe für das tbody eingestellt ist und Stellen Sie den Überlauf auf auto oder blättern Sie ein. Leider, wie Sie gesehen haben, sind Tabellen und CSS eine knifflige Kombination, und IE mag es, daran zu ersticken.

Quelle

2009-08-19 16:21:51

Wenn Sie die Spaltenbreiten beheben können - es ist viel einfacher. Wenn der Browser die Breiten ermitteln soll, wird es viel schwieriger. Im Grunde haben Sie die Tabelle in div, die scrollt (height, overflow: auto) und das div in einer Position hat: relative div. In der äußeren div, haben Sie eine andere div-Position: absolute, Überlauf: versteckt, Höhe: was auch immer die Header-Höhe ist, setzen Sie die innereHTML dieses div auf die innereHTML des inneren div; Hier ist eine Seite, die demonstriert. Es gibt viele Fallstricke, aber es ist machbar ...

<html> 
<head></head> 
<body onload="doit();"> 
<div id="outer" style="position:relative;"> 
    <div id="inner" style="height:100px; overflow:auto;"> 
    <script> 
     var html = '<table><tr><th>Heading 1</th><th>Heading 2</th></tr>'; 
     var width = Math.floor(Math.random() * 100); 
     var d = ''; 
     for(var i = 0; i < width; i++){d += 'a';} 
     for(var i = 0; i < 100; i++){ 
      html += '<tr><td>' + d + '</td><td>some more data</td>'; 
     } 
     html += '</table>'; 
     document.write(html); 
    </script> 
    </div> 
    <div id="secondWrapper" style="position:absolute; background:#fff; left:0; top:0; height:25px; overflow:hidden;"></div> 
</div> 

<script> 
function doit(){ 
    var inner = document.getElementById('inner'); 
    var secondWrapper = document.getElementById('secondWrapper'); 
    secondWrapper.innerHTML = inner.innerHTML; 
} 
</script> 
</body> 
</html>

Hinweis, wie Sie aktualisieren und die Datengröße ändert, entspricht der Header perfekt auf. Das ist der wahre Trick.

Quelle

2009-08-20 06:25:38

Ich verstehe nicht, wie es überhaupt funktioniert, also muss es schwarze Magie sein. Im Ernst, ich musste mit der Höhe meiner TH-Tags und der Höhe von secondWrapper herumspielen, um es zum Laufen zu bringen. Es scheint auch etwas besser zu funktionieren, wenn die Tabelle eine maximale Breite von 98% oder so hat, damit die Tabelle und die Bildlaufleiste nicht aneinander stoßen. Woher kommst du? Wo hast du das überhaupt her? Es ist wirklich schlau. – quillbreaker

Hinweis für andere: Wenn Sie eine Tabelle mit editierbaren Elementen haben, kopiert diese Methode die Tabelle und kopiert so die Elemente. Du wurdest gewarnt. – quillbreaker

Es gibt eine * ganze * Menge von Gotchas. Nachdem ich damit gearbeitet habe, ist es meines Erachtens nicht annähernd stabil genug für die Verwendung in einem Produktionscode. Es ist jedoch zu spät, um meine Antwort auf diese Antwort zu ändern, was zu schade ist. – quillbreaker

Es gab auch ein Quiz für genau diese Art von Ding auf Sitepoint, für diejenigen, die eine Nicht-JS-Lösung suchen. Ich fand jedoch, dass der Tabellenfuß notwendig war, um die Tabellenköpfe daran zu hindern, ihre Breiten zu reduzieren, WENN der Inhalt der Zellen nicht breit genug war. Ich versteckte den Tfoot in der Anwendung, in der ich das verwendete.
Es ist reines HTML/CSS und funktioniert in IE6 und modernen Browsern. Es gibt einige Styling-Einschränkungen für die Kopfzeile.

Quelle

2009-08-20 13:08:02

Ich habe gerade ein jQuery-Plugin zusammengestellt, das genau das tut, was Sie wollen. Es ist sehr klein und wirklich einfach zu implementieren.

Alles, was benötigt wird, ist eine Tabelle, die ein thead und tbody hat.

Sie können diese Tabelle in einem DIV mit einem Klassennamen umbrechen, und die Tabelle wird immer so skaliert, dass sie in dieses div passt. Wenn zum Beispiel Ihr div mit dem Browserfenster skaliert, wird dies auch für die Tabelle gelten. Die Kopfzeile wird beim Scrollen fixiert. Die Fußzeile wird fixiert (wenn Sie eine Fußzeile aktivieren). Sie haben auch die Möglichkeit, die Kopfzeile in der Fußzeile zu klonen und sie zu reparieren. Auch wenn Sie Ihr Browser-Fenster zu klein machen und alle Spalten nicht passen ... wird es auch horizontal scrollen (Header auch).

Mit diesem Plugin kann der Browser die Spalten so skalieren, dass sie keine Spalten mit fester Breite sind.

übergeben Sie einfach den Klassennamen des DIV an das Plugin wie folgt: $ ('. MyDiv'). FixedHeaderTable ({footer: true, footerId: 'myFooterId'}); und das Plugin erledigt den Rest. FooterID ist ein Element auf der Seite, das das Markup für Ihre Fußzeile enthält. Dies wird verwendet, wenn Sie die Seitennummerierung als Fußzeile verwenden möchten.

Wenn Sie mehrere Tabellen auf der Seite haben, funktioniert es auch für jede Tabelle, für die Sie eine feste Kopfzeile haben möchten.

es überprüfen hier aus: Ich bin so das Hinzufügen neuer Funktionen und Fehlerbehebungen täglich http://fixedheadertable.mmalek.com/

seine noch ‚Beta‘ im Auge behalten.

Unterstützte Browser: IE6, IE7, IE8, Firefox, Safari und Chrome

Hier ist ein Link zu meiner Antwort auf eine andere Person, die die gleiche Frage hatte: Frozen table header inside scrollable div

Quelle

2009-10-07 19:22:39 Mark

Wie wäre es damit:

<table style="width: 400px;"> 
<thead><tr> <th> head </th> </tr> 
</thead> 
<tbody style="height: 100px; overflow-y: auto; overflow-x: hidden;"> 
<tr> <th> .. </th> </tr> 
</tbody> 
</table>

Quelle

2011-05-26 18:34:53 goth

Ein guter Gedanke, aber es funktioniert nicht: http://jsfiddle.net/f22uoxqb/ – simmer

Tabelle - feste Kopfzeile, scrollbare Körper, robusteste/einfache Lösung?

Antwort

Verwandte Themen