kostenloser Webspace werbefrei: lima-city


Tabellen Body Scrollen

lima-cityForumDie eigene HomepageHTML, CSS & Javascript

  1. Autor dieses Themas

    mprev

    mprev hat kostenlosen Webspace.

    Ich wollte wissen ob es eine Möglichkeit gibt nur einen Teil einer Tabelle zu scrollen zu bringen.

    Am besten den tbody Bereich.
    Ich habe hier diese Tabelle:
    http://mprev.lima-city.de/sample3.html

    Dabei will ich ab einer bestimmten Länge (zB.: 200px) von tbody,
    dass dieser Bereich einen Scroll-Bar bekommt.

    Habe es da schon mit paar Varianten von overflow versucht.
    Aber ich denke so klappt es nicht.

    Kriegt man das irgendwie hin?
    Ich bräuchte das so, das eben Header & Footer die Spalten die Gleiche Breite haben wie der Body und "immer" zu sehen sind.
    Geht das irgendwie? Hat da wer eine Lösung?
    <table border="1" style="border" >
      <thead>
        <tr>
          <th>Head 1</th>
          <th>Head 2</th>
          <th>Head 3</th>
        </tr>
      </thead>
      <tfoot>
        <tr>
          <td>foot 1</td>
          <td>foot 2</td>
          <td>foot 3</td>
        </tr>
      </tfoot>
      <tbody>
    	<tr>
          <td>Koerper1</td>
          <td>Koerper2</td>
          <td>Koerper3</td>
        </tr><tr>
          <td>Koerper1</td>
          <td>Koerper2</td>
          <td>Koerper3</td>
        </tr><tr>
          <td>Koerper1</td>
          <td>Koerper2</td>
          <td>Koerper3</td>
        </tr><tr>
          <td>Koerper1</td>
          <td>Koerper2</td>
          <td>Koerper3</td>
        </tr><tr>
          <td>Koerper1</td>
          <td>Koerper2</td>
          <td>Koerper3</td>
        </tr><tr>
          <td>Koerper1</td>
          <td>Koerper2</td>
          <td>Koerper3</td>
        </tr><tr>
          <td>Koerper1</td>
          <td>Koerper2</td>
          <td>Koerper3</td>
        </tr><tr>
          <td>Koerper1</td>
          <td>Koerper2</td>
          <td>Koerper3</td>
        </tr><tr>
          <td>Koerper1</td>
          <td>Koerper2</td>
          <td>Koerper3</td>
        </tr><tr>
          <td>Koerper1</td>
          <td>Koerper2</td>
          <td>Koerper3</td>
        </tr><tr>
          <td>Koerper1</td>
          <td>Koerper2</td>
          <td>Koerper3</td>
        </tr><tr>
          <td>Koerper1</td>
          <td>Koerper2</td>
          <td>Koerper3</td>
        </tr><tr>
          <td>Koerper1</td>
          <td>Koerper2</td>
          <td>Koerper3</td>
        </tr><tr>
          <td>Koerper1</td>
          <td>Koerper2</td>
          <td>Koerper3</td>
        </tr><tr>
          <td>Koerper1</td>
          <td>Koerper2</td>
          <td>Koerper3</td>
        </tr>
      </tbody>
    </table>


    Hier: http://www.web-toolbox.net/webtoolbox/tabellen/tabellen-scroll.htm
    Gibt es zwar Scrollende Tabellen, diese umfassen aber auch Header und footer.
    Diese sollen dabei aber stehen bleiben.
  2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

  3. In etwa so? http://deswp.lima-city.de/examples/scroll.html
    Nachteil an dem Beispiel ist, dass die Zellen eine definierte Breite brauchen, da die Tabelle wegen display: block nicht mehr wie eine gewöhnliche Tabelle reagiert.

    - thead, tbody und tfoot sind display: block
    - Header und Footer sind absolut innerhalb des divs positioniert
    - tbody besitzt eine Höhe, overflow-y: auto und ist etwas breiter als sein Inhalt (für den Scrollbalken)
    - Zellen haben eine feste Breite (100px im Beispiel)

    Funktioniert übrigens nicht im Internet Explorer.

    Beitrag zuletzt geändert: 10.1.2013 13:50:11 von deswp
  4. coopfungamers

    coopfungamers hat kostenlosen Webspace.

    muss es denn unbedingt eine echte Tabelle sein?
    ich denke mit div´s wärst Du da besser dran, da kannst Du dann auch vernünftig mit den CSS scroll Regeln spielen ;)
  5. Mögliche Ansätze:

    pure CSS: http://www.imaputz.com/cssStuff/bigFourVersion.html
    jquery: http://www.farinspace.com/jquery-scrollable-table-plugin/

    Edith: Weitere Ideen finden sich in diesem Thread bei Stackoverflow

    Beitrag zuletzt geändert: 10.1.2013 1:39:11 von fatfreddy
  6. css2.1 hat das scrollen zwar auch in den Tabellen vorgesehen, nur die meisten Browser unterstützen dies noch nicht.

    Wenn du die breite der Tabellen-Spalten schon kennst und dir ie Benützer egal sind:-)
    <style style=text/css>
    table>*{width:310px;display: block;}
    tbody { height: 200px; overflow: auto;}
    table>*>*>*{width:90px;}
    </style>

    Sollte alles dynamisch sein findest du im web komplizierte Lösungen

    Liebe grüsse Dregi

    Beitrag zuletzt geändert: 10.1.2013 4:17:18 von dregi
  7. Autor dieses Themas

    mprev

    mprev hat kostenlosen Webspace.

    deswp schrieb:
    Funktioniert übrigens nicht im Internet Explorer.

    Aussehen tuts zwar sonst nett. Aber soll auch im IE funktionieren (also 8/9 +)

    coopfungamers schrieb:
    muss es denn unbedingt eine echte Tabelle sein?
    ich denke mit div´s wärst Du da besser dran, da kannst Du dann auch vernünftig mit den CSS scroll Regeln spielen ;)

    Jop sind Daten für und aus Tabellen, die auch semantisch in Tabellen gehören.
    Außerdem würde es wenn es wie von mir erhofft funktionieren würde auch das einfachste

    fatfreddy schrieb:
    Mögliche Ansätze:

    pure CSS: http://www.imaputz.com/cssStuff/bigFourVersion.html
    jquery: http://www.farinspace.com/jquery-scrollable-table-plugin/

    Edith: Weitere Ideen finden sich in diesem Thread bei Stackoverflow


    Das CSS wieder mal ohne IE ... jQuery scheint zu gehen.
    Schade das man für so was simples nicht ohne aus geht.

  8. hm....
    habe dies mal im ie9 und chrome getestet.
    funktioniert bei diesen 2. Bei ie7 funktioniert es nicht.
    bei anderen Browser(ie8) weis ich nicht wie es ausschaut.
    Falls jemand was anderes hat kann er ja ne Rückmeldung machen.
    <!DOCTYPE html>
    <head >
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <style type="text/css">
    * { -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box;border-collapse:collapse; }
    table * {width:300px;display:block;}
    tbody {position:absolute; overflow-Y: scroll; overflow-X:hidden;height: 200px;}
    tfoot {position:absolute;margin-top:200px;}   /*  tfoot->margin-top=tbody->height   */
    table>*>*>*{display:inline-block;width:93px;} /* bei 4 spalten 24%,.... */
    table>*>*:nth-child(2n-1){background:#aaa;}
    table>*>*>*{border:1px solid black;}
    </style>
    </head>

    -edit-
    hier einen Link zu dem Beispiel:
    http://dregi.lima-city.de/hilfestellungen/scrolltable.html
    -------
    mfg Dregi

    Beitrag zuletzt geändert: 11.1.2013 4:09:32 von dregi
  9. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?

Über lima-city

Login zum Webhosting ohne Werbung!