Ankündigung

Einklappen
Keine Ankündigung bisher.

Overflow mit div-tag, Spaltenbreiten sind nicht bündig

Einklappen

Neue Werbung 2019

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • Overflow mit div-tag, Spaltenbreiten sind nicht bündig

    Hallo,

    ich hab lange im Netz gesucht und leider nix entsprechendes gefunden.

    Ich habe eine Tabelle definiert, in der die Spaltenüberschriften stehen bleiben und der Rest der Tabelle scrollbar ist.

    Leider entsprechen die Spaltenbreiten der Überschriften nicht mit den Rest der Tabelle überein.

    Gibt es eine Möglichkeit die Spaltenbreiten für die Überschrift und weiteren Spalteninhalt bündig auszurichten ?

    Der Code sieht bis dato etwa so aus:

    Code:
     
    <html>
     
    <table>
    <head>
    <tr>
    <th>Überschrift 1</th>
    <th>Überschrift 2</th>
    <th>Überschrift 3</th>
    </tr>
    </head>
     
    <tbody>
    <tr>
    <td colspan = "3"> 
     
    <!-- entsprechend der Anzahl der Überschriften, werden mit colspan alle verfügbaren Spalten zu wieder einer einzelnen Zelle verbunden und in dieser wiederum eine neue Tabelle erstellt. -->
     
    <div style="height: 500px; width: 700px; overflow-y: scroll; overflow-x: hidden;">
    <table>
    <tr>
    <td>Inhalt Spalte 1/Zeile1>
    <td>Inhalt Spalte 2/Zeile1> 
    <td>Inhalt Spalte 3/Zeile1>
    </tr>
    <tr>
    <td>Inhalt Spalte 1/Zeile2>
    <td>Inhalt Spalte 2/Zeile2> 
    <td>Inhalt Spalte 3/Zeile2>
    </tr> 
    .
    .
    .
    </table> 
    </div>
    </td> 
    </tr>
    </tbody>
     
    </table> 
     <html>

    Ich habe schon mitbekommen, dass der Firefox-Browser "overflow" im tbody-tag akzeptiert. Ich brauch aber eine Lösung, die mindestens auch im IE7 funktioniert.

    Danke!

    Gruß
    Miglo

  • #2
    Das ist ja auch kein Wunder, wenn du zwei Tabellen nutzt ohne feste Breitenangaben zu nutzen. Das ist übrigens auch semantisch Blödsinn.
    Mache eine einzige Tabelle draus und gib dann thead ein position: fixed. Ich habe aber keine Ahnung, ob das in allen Browsern richtig funktioniert, vor allem beim Ausdrucken der Seite.
    Refining Linux: “[url=http://www.refining-linux.org/archives/65/Performing-push-backups-Part-1-rdiff-backup/]Performing Push Backups – Part 1: rdiff-backup[/url]”

    Kommentar


    • #3
      Hallo Manko10,

      ich hab jetzt ne Weile rum probiert, aber ich kriegs nicht ganz hin. Deine Variante das alles in nur einer Tabelle zu machen habe ich übernommen. Leider schaffe ich es aber nicht, den thead zu fixieren.

      Ich hab´s mit

      <thead style = "position: fixed;">

      mit Einbettung in ein div-tag

      <div style = "position: fixed;">
      <thead>
      Inhalt
      </thead>
      </div>

      und auch mit css probiert (ganz sehr neue Geschichte für mich...)

      <style type="text/css">
      #fest{position:fixed;}
      </style>

      <thead id = "fest">

      bzw.

      <div id = "fest">


      Nix davon hat das gewünschte Ergebnis gebracht.

      Kannst du mir vielleicht ein Beispiel geben?


      Danke.

      Gruß
      Miglo

      Kommentar


      • #4
        Wie ich es mir schon fast dachte, macht ein position: fixed Probleme. Aber du könntest dem tbody ein overflow: auto und eine gewünschte height-Angabe geben.
        Allerdings verstehe ich nicht ganz, worauf du hinauswillst bzw. wofür du das brauchst.
        Refining Linux: “[url=http://www.refining-linux.org/archives/65/Performing-push-backups-Part-1-rdiff-backup/]Performing Push Backups – Part 1: rdiff-backup[/url]”

        Kommentar


        • #5
          Zitat von Manko10 Beitrag anzeigen
          dem tbody ein overflow: auto und eine gewünschte height-Angabe geben.
          Oder overflow: scroll, um das für alle Browser vebindlich festzulegen, zumal die Scrolleiste dann immer dasteht und mit in die Breitenangaben einbezogen werden kann...
          Je grösser der Dachschaden, desto schöner der Ausblick zum Himmel. - [WIKI]Karlheinz Deschner[/WIKI]

          Kommentar


          • #6
            Allerdings verstehe ich nicht ganz, worauf du hinauswillst bzw. wofür du das brauchst.
            Ich möchte gerne in eine sehr lange Tabelle einen Scrollbalken einfügen. Die Spaltenüberschriften sollen beim scrollen aber stehen bleiben. Das ganze dient dazu, dass eine Website nicht ellen lang wird, sondern der Inhalt als solcher übersichtlich bleibt.

            Aber du könntest dem tbody ein overflow: auto und eine gewünschte height-Angabe geben.
            Im Mozilla-Firefox funktioniert das sehr gut. Der IE7 interpretiert die height-Angabe aber leider für jede Zeile und ein Scrollbalken gibt´s leider auch nicht.

            Ich bräuchte aber eine Lösung, die im IE7 als auch im Firefox läuft.

            Bis dato habe ich zwei Varianten, die beide nicht zufriedenstellend sind:

            1. alles in eine Tabelle.
            Mit <tbody style="overflow: sroll; height=500px;"> funktioniert im Firefox astrein aber leider nicht im IE7.

            2. Tabelle in einer Tabelle (siehe Code ganz oben im Beitrag)
            Funktioniert im Firefox, als auch im IE7. Die Spalten der beiden Tabellen liegen dann aber nicht bündig untereinander.

            Gruß
            Miglo

            Kommentar


            • #7
              Zitat von Miglo Beitrag anzeigen
              2. Tabelle in einer Tabelle (siehe Code ganz oben im Beitrag)
              Funktioniert im Firefox, als auch im IE7. Die Spalten der beiden Tabellen liegen dann aber nicht bündig untereinander.
              Bei zwei voneinander unabhängigen Tabellen ja auch nicht weiter verwunderlich.
              Da müsstest du entweder die Spaltenbreiten selber vorgeben, oder mit JavaScript nachhelfen (was auch wieder problematisch wird, wenn der Nutzer die Schriftgröße ändert.)


              Einen weiteren Ansatz bietet http://aktuell.de.selfhtml.org/artik...scrolltabelle/
              Natürlich auch nicht unbedingt „schön“ - aber an dem Problem haben sich schon einige Leute die Zähne ausgebissen, weil dafür leider keine simple, browserübergreifend funktionierende Lösung existiert.
              [SIZE="1"]RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?[/SIZE]

              Kommentar

              Lädt...
              X