Tabelle mit festen header oben

Ich versuche eine Tabelle erstellen, w/einer festen header an der Spitze für Daten aus unserer Datenbank. Wenn ich " position:fixed;", um die header die css hält Sie es an der Spitze, aber es zwingt die gesamte Kopfzeile für die erste Spalte. Wie bekomme ich die Kopfzeile der Tabelle an der Spitze und richtig ausgerichtet w/Spalten? Am Liebsten würde ich ein css/html-Lösung, wenn möglich.

EDIT: ich habe versucht, ganz wenige, die jQuery-Lösungen, die ich gefunden habe auf der SO und über google. Einige arbeiten, einige nicht. Diejenigen, die arbeiten, die auf Ihre eigenen neigen dazu zu brechen, wenn ich kombinieren Sie es mit anderen scripts, die ich habe laufen auf meinen Seiten...

<style>
  .dg_hdr_row{
  position: fixed;
  top:0;
  height: 25px;
  }

  .dg_col1{ width:60%; border: 1px solid #000; padding: 5px;}
  .dg_col2{ width:15%; border: 1px solid #000; padding: 5px;}
  .dg_col3{ width:10%; border: 1px solid #000; padding: 5px;}
  .dg_col4{ width:15%; border: 1px solid #000; padding: 5px;}

</style>

<table width="100%">

 <thead width="100%" >
  <tr width="100%" class="dg_hdr_row" >
   <th width="60%">Column 1</th>
   <th width="15%">Column 2</th>
   <th width="10%">Column 3</th>
   <th width="15%">Column 4</th>
  </tr>
 </thead>

    <tbody>
        <tr class="dg_row">
            <td class="dg_col1"></td>
            <td class="dg_col2"></td>
            <td class="dg_col3"></td>
            <td class="dg_col4"></td>
        </tr>
        <tr class="dg_row">
            <td class="dg_col1"></td>
            <td class="dg_col2"></td>
            <td class="dg_col3"></td>
            <td class="dg_col4"></td>
        </tr>       
    </tbody>
</table>
Mögliche Duplikate von stackoverflow.com/questions/684211/...
Nach dem Stossen an, es funktioniert in Chrome (17 sicher, keine Ahnung von früher), aber nicht in Firefox oder IE 9.
Ich würde auch argumentieren, dass dies nicht eine doppelte, da es eine konkrete situation, nicht um eine Allgemeine Anfrage, wie das erreichen der sticky-header. Und die andere Frage ausdrücklich gebeten, für ein jQuery-plugin.
Ich habe versucht, viele der "Antworten" auf diese Frage, aber Sie funktionieren nicht.
Ich bin mit Chrome 16...ich glaube nicht, 17 " ist auch noch raus. Nicht korrekt angezeigt werden, die in jedem von Chrome, IE 9 oder Firefox für mich.

InformationsquelleAutor Brent | 2011-12-31

  1. 4

    So gibt es einige subtile Probleme mit der festen Positionierung, machen dies besonders schwierig.

    Feste Elemente sind relativ zum browser-Sicht

    Wenn Sie erklären position: fixed jede zusätzliche position Regeln (wie left oder top) wird der Kopf relativ zum viewport selbst - der oberen linken Ecke des Bildschirms. Sie können nicht verwenden Sie alle tricks, um es relativ zu seinem Elternteil, entweder, weil es wird an der gleichen Stelle, wenn die Seite scrollt. Könnte dies nicht auf Ihrer web-Seite, aber es ist immer noch etwas zu prüfen.

    Feste Elemente funktionieren nicht wie erwartet in mobilen Browsern

    Ich weiß nicht, Ihren bestimmten Fall, aber es ist ein Denkanstoß.

    Feste Positionierung entfernt Elemente aus dem normalen Fluss

    Dies ist, was das problem verursacht, soweit ich das sagen kann. Wenn position: fixed deklariert ist, wird das element tatsächlich bricht aus dem normalen layout und position von Elementen auf der Seite, und arbeitet jetzt in seiner eigenen einzigartigen block.

    Aus der CSS2-spec (dies gilt für Feste Positionierung):

    In die absolute Positionierung-Modell, ein Feld ist explizit offset in Bezug auf seine enthaltenden block. Es ist entfernt von der normalen Strömung vollständig (es hat keine Auswirkungen auf die späteren Geschwister). Eine absolut positionierte box richtet einen neuen umschließenden Blocks für normalen Durchfluss Kinder und unbedingt (aber nicht fest) positioniert Nachkommen. Jedoch, der Inhalt eines absolut positionierten Elements fließen nicht um andere Boxen. Sie können darüber hinwegtäuschen, Inhalte von einem anderen Feld (oder werden verdunkelt sich), abhängig von der stack-Ebenen der überlappenden Boxen.

    Dies ist gut, da möchte man den Kopf schweben über dem Tisch, aber auch schlecht, weil in den meisten Browsern, es angeordnet ist, die separat von dem rest der Tabelle.

    Mögliche Korrekturen

    • Wenn das einzige, was auf der Seite ist die Tabelle, die Sie sollten in der Lage sein, um den header zu verwenden width: 100% und die gleiche Zelle Breite als der rest des Tisches. Es könnte schwer sein, um die Dimensionierung zu passen genau das richtige, obwohl, vor allem, wenn das Fenster in der Größe geändert wird.

    • Einige einfache JavaScript zum anzeigen der header. Ich weiß, Sie wollen, halten Sie diese mit HTML und CSS (ich in der Regel auch tun), aber JavaScript passt gut, weil die floating-header sollte nicht einen wesentlichen Teil der Nutzung der Website. Es sollte für Browser, die es unterstützen, aber diejenigen, die das nicht sollten noch in der Lage sein, um den Tisch zu verwenden. Es gibt eine sehr gute Technik bei CSS-Tricks

      (http://css-tricks.com/persistent-headers/), aber Sie werden in der Lage sein zu finden, andere suchen für die "sticky-table-Header" auf Ihrer bevorzugten Suchmaschine.

    InformationsquelleAutor derekerdmann

  2. 1

    Haben Sie sich DataTables noch? Hier ist der horizontale Teil, wenn ich verstehe, was du meinst:

    http://datatables.net/release-datatables/extras/FixedColumns/index.html

    Ich bin auf der Suche für die oben in der Tabelle, behoben werden, nicht die Links
    hast du andere Beispiele? Es kann fast alles tun, mit einer Tabelle. 🙂

    InformationsquelleAutor DGM

  3. 1

    Hier ist eine funktionierende HTML - /CSS-Lösung für Ihr problem. 

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
        <style>
        body{
            margin: 0;
            padding: 0;
            font-family: sans-serif;
        }
        .fixed {
            position: relative;
            width: 100%;
            top: 25px;
            border: 0;
            border-collapse: collapse;
        }
        .fixed td, .fixed th {
            border: 1px solid black;
            height: 25px;
        }
        .fixed tr:first-child {
            display: table;
            position: fixed;
            width: 100%;
            background: #FFFFFF;
        }

      .dg_col1{ width:60%;}
      .dg_col2{ width:15%;}
      .dg_col3{ width:10%;}
      .dg_col4{ width:15%;}

</style>
    </head>

    <body>
        <table class="fixed">
            <tr>
                <th width="60%">Header 1</th>
                <th width="15%">Header 2</th>
                <th width="10%">Header 2</th>
                <th width="15%">Header 2</th>
            </tr>
            <tr>
                <td class="dg_col1">Data 14</td>
                <td class="dg_col2">Data 14</td>
                <td class="dg_col3">Data 14</td>
                <td class="dg_col4">Data 24</td>
            </tr>           

        </table>
    </body>
</html>
    fast. funktioniert Super in chrome, sondern bricht in ie 9 und firefox
    Ok, das funktioniert in chrome, aber in firefox müssen Sie ad margin-top:-25px und margin-left:-1px die ,festen tr:first-child-Klasse
    brauchen Sie vielleicht einen dirty if-Anweisung in den html-Code für ie oder ff

    InformationsquelleAutor MadScientist

  4. 0

    Wenn Sie sich für eine framework-unabhängige Lösung versuchen Grid: http://www.matts411.com/post/grid/

    Gehostet auf Github hier: https://github.com/mmurph211/Grid

    Er fördert nicht nur die festen Header, es unterstützt auch Feste linken Spalten-und Fußzeilen, unter anderem. Leider erfordert Javascript.

    Vielen Dank für den Beitrag Ihre Antwort! Bitte Lesen Sie die FAQ on Self-Promotion vorsichtig. Beachten Sie auch, dass es erforderlich, die Sie der post einen disclaimer jedes mal, wenn Sie einen link zu Ihrer eigenen Website/Produkt.

    InformationsquelleAutor Matt

Schreibe einen Kommentar