Wie "lock" - Spalten in einer HTML-Tabelle?

Bin ich ziehen zurück eine große Menge von tabellarischen Daten, die ich anzeigen möchten, mithilfe einer Tabelle. Die einzige Einschränkung ist, dass ich möchte in der Lage sein, auf "lock" ein paar der Spalten (fname/lname/E-Mail), so dass, wenn der Benutzer einen Bildlauf horizontal die Spalten bleiben immer "gesperrt" und werden sichtbar. Ich habe etwas ähnliches gemacht, um dies vor, aber das war zurück in der frameset-Tage, so dass dieser Ansatz nicht mehr gültig ist.

Ich dachte, etwas zu tun, der gut mit eindecken der Tische übereinander, aber bisher habe ich keinen Erfolg mit dieser Arbeit. Jemand irgendwelche klugen Vorschläge?

Ein perfektes Beispiel, was ich versuche zu tun, ist hier:
http://www.google.com/squared/search?q=world+Führer

  • Du könntest ein iframe-Element, aber IME-es ist eine königliche Schmerz machen Sie sicher, dass die Spaltenüberschriften sind die gleiche Größe wie die eigentlichen Daten...
  • Fand diese Frage im Zusammenhang mit stackoverflow.com/questions/1100835/...
  • Ahh das ist genau das, was ich Suche, danke für den Hinweis, dieser Beitrag aus!
  • Leider sind die Lösungen gepostet, es sind nicht bis zu par. Das javascript, das ist die "akzeptierte Lösung" verlangsamt auf ein Schneckentempo, sogar mit einer kleinen Anzahl von Tabellenzeilen. Ich bin nur mit 500 und seine unbrauchbar.
InformationsquelleAutor Nicholas Kreidberg | 2009-10-16
  1. 2

    Wenn ich das richtig verstanden habe, was Sie wollen, können Sie einen div-container mit position: relative overflow: auto und eine Feste Breite. Im inneren, trennen Sie den Teil, den Sie wollen werden gesperrt, von der anderen, in sagen wir, zwei verschiedenen divs. Das div, das das "gesperrt" - Teil haben sollte position: absolute und left: 0.

    Es ist einfach das große Bild, aber Sie sollten in der Lage sein zu erreichen, was Sie wollen auf diese Weise.

    • Ich habe das gleiche getan, in der Vergangenheit von hand und die sehr gut funktioniert - DataTables (jQuery plugin) wird dies automatisch für Sie mit dieser Erweiterung, die macht das Leben ein bisschen leichter! datatables.net/extras/fixedcolumns
    • Gibt es eine Möglichkeit, dies zu tun, ohne Javascript, z.B. Reine CSS?
    InformationsquelleAutor treznik
  2. 0

    Den code unten sollte ziemlich selbsterklärend. Sie können hinzufügen/entfernen von Zeilen aus TBODY während der THEAD bleibt vollkommen statisch. Dies ist, was TBODY und THEAD existieren 😉

    <style type="text/css" media="screen">
  .myTable
  {
    border:1px solid #000;
    border-spacing:0px;
    width:300px
  }

  .myTable thead td
  {
    background-color:#000;
    color:#FFF;
  }

  .myTable tbody
  {
    height:300px;
    overflow-y:auto;
    overflow-x:hidden;
  }
</style>

<table class="myTable">
  <thead>
    <tr>
      <td>Fname</td>
      <td>Lname</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Lior</td>
      <td>Cohen</td>
    </tr>
    <tr>
      <td>Lior</td>
      <td>Cohen</td>
    </tr>
    <!-- put more rows here -->
  </tbody>
</table>
    • Ich bin ein wenig verwirrt, wie sieht die Dinge "gesperrt" gesetzt? Ich habe mehrere Elemente die ich brauche in <thead> aber ich will nur ein paar (für den Zweck dieses Beispiels können nur sagen, dass einer von Ihnen, so zunächst der name) zu bleiben "gesperrt". Real world " - Beispiel = google.com/squared/search?q=world+Führer - feststellen, wie die Namen nie bewegen.
    • Sorry, habe ich falsch verstanden, Ihr problem dann. Ich dachte, Sie meinte eine Tabelle mit einem statischen Header-Zeile und einem scrollbaren Körper Inhalt. Ich werde aktualisieren diesen post tmw mit einer Lösung, deckt eine gesperrte linke Spalte als gut (es sei denn, Sie benötigen nun nicht mehr Antworten, weil Sie schon einen hat).
    • Nein eigentlich mache ich immer noch erfordern eine Lösung, noch habe nicht gefunden was ich bin glücklich mit.
    • Immer noch wahr jetzt 😛
    InformationsquelleAutor Lior Cohen
  3. 0

    Etwas wie dies funktionieren sollte:

    Sind Sie gehen zu müssen, mit ihm zu spielen ein wenig, so dass Sie nicht über die horizontale Bildlaufleiste, aber Sie bekommen die Idee.

    Natürlich, das hat nicht funktioniert in IE7. Es kann funktionieren, in-8, aber wie immer YMMV. Viel Glück. Ich hoffe, das vermittelt Ihnen die ersten Schritte in die richtige Richtung.

    <html>
  <head>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">
      $(document).ready(function() {
        var body = $('#table-body');
        for (var i = 0; i < 100; i++) {
          var row = $('<tr />');
          var fname = $('<td />')
            .text('FirstName' + i);
          var lname = $('<td />')
            .text('LastName' + i);
          var email = $('<td />')
            .text('FirstLast' + i + '@example.com');
          row
            .append(fname)
            .append(lname)
            .append(email);
          body.append(row)
        }
      });
    </script>
    <style type="text/css">
      #table-body {
        height: 150px;
        overflow: auto;
      }
    </style>
  </head>
  <body>
    <table>
      <thead>
        <td>First Name</td>
        <td>Last Name</td>
        <td>Email</td>
      <thead>
      <tbody id="table-body">
      </tbody>
    </table>
  </body>
</html>
    InformationsquelleAutor Stephen Delano
Schreibe einen Kommentar