Stefan: overflow: scroll in Tabellenzelle ohne Zellveränderung

Hallo,

ich möchte in einer Tabellenzelle für den Fall, dass der Inhalt nicht rein passt (z.B. kleine Auflösung), einen Schieber für diese Zelle. Der Browser soll keinen Schieber für die ganze Seite anzeigen.
Das tut er nämlich sonst auch nicht.
Die Tabelle hat ringsherum Zellen mit festen Pixelmaßen und insgesamt 100% Breite und Höhe, so dass sich nur diese Zelle in der Größe verändern kann.
Wenn ich jetzt z.B. in die Zelle ein div mit 100% setze und overflow: scroll, dann zeigt mir Mozilla zwar einen Schieber an, aber der ist nutzlos, denn Mozilla zieht die ganze Tabelle größer, so dass man den jetzt vorhandenen Seitenschieber verwenden muss.

Ich habe noch 50 Attributkombinationen ausprobiert, aber nicht das erreicht was ich suche.

Geht das? Wenn ja wie?

Danke schon mal,
Stefan

  1. Hallo Stefan,

    ja es geht, allerdings nur mit dem vielgeprügelten, ungeliebten Kind Javascript. Die allerbeste Möglichkeit ist dann auch kein valides HTML (so nur als Bemerkung zum abwäägen) mehr!

    Das gesammte Layout muß straff in Pixeln durchorganisiert sein, sonst gibt es doch noch ein Scrollbalken:

    Deispieldatei

    <html>
    <head>
    <style>
    body  {margin:0px;overflow:auto}
    table {width:100%;height:100%;table-layout:fixed}
    .tr1  {height:100px}
    #text {height:300px;overflow:auto}
    </style>
    </head>
    <body>
    <table cellpadding="0" cellspacing="0">
     <colgroup>
          <col width="*">
          <col width="200">
          <col width="400">
          <col width="*">
     </colgroup>

    <tr class="tr1">
            <td> </td>
            <td colspan="2"> ~Seitenkopf~ </td>
            <td> </td>
     </tr>
     <tr>
            <td> </td>
            <td> ~Seitennavigator~ </td>
            <td>
                 <div id="text"> ~Seiteninhalt~
                 </div>
            </td>
            <td> </td>
     </tr>
    </table>
    </body>
    </html>
    <script type="text/javascript">
    if(window.innerHeight)
     {
     var divgroesse = window.innerHeight - 102
     document.getElementsByTagName("table")[0].style.height = window.innerHeight + "px"
     document.getElementById("text").style.height = divgroesse + "px"
     }
    if(document.body && document.body.offsetHeight)
     {
     var divgroesse = document.body.offsetHeight - 102
     document.getElementById("text").style.height = divgroesse+"px";
     }
    </script>

    Soll der Inhalt nicht von oberer bis unterer Kante gehen, kannst Du auf das JS getrost verzichten und gibst einfach nur die gewünschte Größe des ~Seiteninhalt~ als Wert für #text an.

    Gruß aus Berlin!
    eddi

  2. Hi,

    Hallo,

    ich möchte in einer Tabellenzelle für den Fall, dass der Inhalt nicht rein passt (z.B. kleine Auflösung), einen Schieber für diese Zelle. Der Browser soll keinen Schieber für die ganze Seite anzeigen.

    Da die Eigenschaft overflow nicht für table-cell gilt, sondern nur für blocklevel-Elemente, muß in die Tabellenzelle ein div mit 100% Breite/Höhe.
    Dieses kann dann per overflow:auto bei Bedarf Scrollbars kriegen.

    cu,
    Andreas

    --
    MudGuard? Siehe http://www.Mud-Guard.de/
    Fachfragen per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.
    1. ich möchte in einer Tabellenzelle für den Fall, dass der Inhalt nicht rein passt (z.B. kleine Auflösung), einen Schieber für diese Zelle. Der Browser soll keinen Schieber für die ganze Seite anzeigen.

      Da die Eigenschaft overflow nicht für table-cell gilt, sondern nur für blocklevel-Elemente, muß in die Tabellenzelle ein div mit 100% Breite/Höhe.
      Dieses kann dann per overflow:auto bei Bedarf Scrollbars kriegen.

      Das habe ich doch auch schon so geschrieben!
      Es funktioniert aber nicht mit Mozilla. IE macht das, aber Mozilla bezieht die 100% anscheinend nicht aufs Elternelement td (was in diesem Fall dummerweise keine feste Größe haben soll, weil alle anderen Zellen fest sind), sondern auf das ganze Browserfenster.

      Grüße,
        Stefan

      1. hi,

        Es funktioniert aber nicht mit Mozilla. IE macht das, aber Mozilla bezieht die 100% anscheinend nicht aufs Elternelement td (was in diesem Fall dummerweise keine feste Größe haben soll, weil alle anderen Zellen fest sind), sondern auf das ganze Browserfenster.

        doch, auch mozilla wird die 100% auf's elternelement beziehen.
        allerdings hat dieses ja bei dir gar keine feste grösse, also wird die grösse nach dem inhalt ermittelt.

        du solltest einsehen können, dass du hier ein huhn-ei-problem vor dir hast.

        gruss,
        wahsaga