Hallo!

Ich habe eine Tabelle und möchte, dass ich die Spaltenüberschriften immer sehen kann, auch wenn ich nach unten scrollen muss, um weitere Datensätze einzusehen ...

Mein bisheriges Konzept
----------------------------
- 2 Frames: 1. Spaltenüberschriften 2. eigentlicher Tabelleninhalt
- mit Javascript die einzelnen Spalten-Breiten im 2. Frame einlesen
- diese dann als Parameter über die URL an das 1. Frame übergeben, indem es über Javascript geladen wird zusammen mit den Parametern
- im 1. Frame die URL-Parameter mit PHP auseinanderpflücken, um die einzelnen Breiten der Spalten einzustellen

Problem
---------
- Es funktioniert, aber leider nur teilweise, da die offsetWidth-Werte um 3 Pixel bei mir zu groß ermittelt werden, weiß nicht warum
- Ich muss offsetWidth verwenden, da ich die Breiten nicht statisch festgelegt habe, sondern er soll sich nach dem Inhalt richten, der aus der Datenbank geladen wird (statisch wäre es natürlich einfach)

Ich habe mind. 20 Stunden mit diesem Problem verbracht ... so langsam gehen mir die Ideen aus

Hier die 4 Test-Dateien, die ich bisher zusammengeschrieben habe

index.php
Code:
<html>
  <head>
   <title></title>
  </head>

  <frameset rows='24,*' border='0'>
    <frame src=''                             name='spaltenbreiten_anpassen'  marginheight='0' scrolling='no'> 
    <frame src='spaltenbreiten_ermitteln.php' name='spaltenbreiten_ermitteln' marginheight='0'>
  </frameset>

</html>
spaltenbreiten_anpassen.php
Code:
<html>
  <head>
    <title></title>
    <link rel="stylesheet" type="text/css" href="formate.css">
  </head>
  <body>
    <?php
         echo "<table border='1' style='width&#58;&#123;$_GET&#91;'table_width'&#93;&#125;px;'>
                 <tr>
                   <th width='&#123;$_GET&#91;'th0'&#93;&#125;'>Bild</th>
                   <th width='&#123;$_GET&#91;'th1'&#93;&#125;'>Objekt-Nr.</th>
                   <th width='&#123;$_GET&#91;'th2'&#93;&#125;'>PLZ</th>
                   <th width='&#123;$_GET&#91;'th3'&#93;&#125;'>Ort</th>
                   <th width='&#123;$_GET&#91;'th4'&#93;&#125;'>Fläche</th>
                   <th width='&#123;$_GET&#91;'th5'&#93;&#125;'>Preis</th>
                   <th width='&#123;$_GET&#91;'th6'&#93;&#125;'>Kurzbeschreibung</th>
                   <th width='&#123;$_GET&#91;'th7'&#93;&#125;'>Exposee</th>
                 </tr>
               </table>";
    ?>
  </body>
</html>
spaltenbreiten_ermitteln.php
Code:
<html>
  <head>
   <title></title>
   <link rel="stylesheet" type="text/css" href="formate.css">
  </head>

  <body>
    <table border='1' id='haupttabelle'>

      <script type='text/javascript'>
        var tr_nr = 0;
        var td_nr = 0;
        var anzahl_zeichen = 0;
        var zeichen_nr = 0;
        var inhalt = "";
        while &#40;tr_nr < 50&#41; //Tabellen-Inhalt erzeugen
        &#123;
              document.write&#40;"<tr>"&#41;; //Einzelne Zeilen erzeugen
              td_nr = 0; //reset
              while &#40;td_nr < 8&#41; //Einzelne Spalten erzeugen mit irgendwelchen Inhalt
              &#123;
                    anzahl_zeichen = Math.round&#40;Math.random&#40;&#41; * &#40;td_nr + 2&#41; * 2&#41;;
                    document.write&#40;"<td>"&#41;;
                    zeichen_nr = 0;
                    inhalt = "";
                    while &#40;zeichen_nr < anzahl_zeichen&#41; //Inhalt mit unerschiedlicher Länge erzeugen
                    &#123;
                          inhalt += zeichen_nr;
                          zeichen_nr++;
                    &#125;
                    document.write&#40;inhalt&#41;;
                    document.write&#40;"</td>"&#41;;
                    td_nr++;
              &#125;
              document.write&#40;"</tr>"&#41;;
              tr_nr++;
        &#125;
      </script>

      <tr>
        <th>Bild</th>
        <th>Objekt-Nr.</th>
        <th>PLZ</th>
        <th>Ort</th>
        <th>Fläche</th>
        <th>Preis</th>
        <th>Kurzbeschreibung</th>
        <th>Exposee</th>
      </tr>

    </table>

    <script type='text/javascript'>
        function spaltenbreite_aendern&#40;&#41;
        &#123;
                 //window.alert&#40;"Jetzt geht es los!"&#41;;
                 var spalten_nr = 0;
                 var spalten_breite = new Array&#40;8&#41;;
                 var tabellen_breite = 0;
                 var tabellen_breite_inkrementell = 0;
                 var relative_tabellen_breite = 0;
                 var fenster_breite = 0;
                 var url_parameter_liste = "";
                 var datei_mit_parametern = "";
                 var anzahl_spalten = 8;
                 var korrektur_wert = 3; //Was soll das denn sein? Was ermittelt offsetWidth eigentlich für eine Breite?

                 while &#40;spalten_nr < anzahl_spalten&#41; //einzelnen Spalten-Breiten ermitteln
                 &#123;
                       spalten_breite&#91;spalten_nr&#93; = document.getElementsByTagName&#40;"th"&#41;&#91;spalten_nr&#93;.offsetWidth; //diese ist leider um ein paar Pixel zu gross, vielleicht wegen dem border, allerdings kann ich den irgendwie nicht ermitteln
                       tabellen_breite_inkrementell += spalten_breite&#91;spalten_nr&#93;; //auch das darf nicht unversucht bleiben
                       spalten_breite&#91;spalten_nr&#93; = spalten_breite&#91;spalten_nr&#93; - korrektur_wert; //<v111> solange diese 'Umrechnung' bleibt, funktioniert es in firefox und iexplore einwandfrei
                       if &#40;spalten_nr > 0&#41;
                       &#123;
                          url_parameter_liste += "&th" + spalten_nr + "=" + spalten_breite&#91;spalten_nr&#93;;
                       &#125;
                       else //spalten_nr = 0
                       &#123;
                           url_parameter_liste += "?th" + spalten_nr + "=" + spalten_breite&#91;spalten_nr&#93;;
                       &#125;
                       spalten_nr++;
                 &#125;

                 tabellen_breite = document.getElementById&#40;"haupttabelle"&#41;.offsetWidth; // Breite der gesamten Tabelle ermitteln, da im frame 'datenbank_main' ein Scrollbalken rechts entsteht, während das im Frame 'haupttabelle_spalten_oeberschriften' nicht der Fall ist, also wären dort alle Spalten etwas breiter, weil die gesamte Tabelle dort etwas breiter ist, weil der Scrollbalken wegfällt, hast du das endlich kapiert ;-&#91;
                 document.getElementById&#40;"haupttabelle"&#41;.style.width = tabellen_breite; // Tabellenbreite statisch machen, damit sie sich bei Fenstergrössen-Änderungen nicht dynamisch anpasst, denn das passiert im 1. Frame auch nicht
                 url_parameter_liste += "&table_width=" + tabellen_breite; //relative_tabellen_breite;
                 url_parameter_liste += "&spalten_anzahl=" + anzahl_spalten;
                 datei_mit_parametern = "spaltenbreiten_anpassen.php" + url_parameter_liste;
                 top&#91;'spaltenbreiten_anpassen'&#93;.document.location.href = datei_mit_parametern;
        &#125;
        spaltenbreite_aendern&#40;&#41;;
    </script>

  </body>
</html>
formate.css
Code:
table
&#123;
  border-color&#58;black;
  border&#58;1px;
  border-collapse&#58;collapse;
  border-style&#58;solid;
  width&#58;90%;
  font-size&#58;12pt;
  empty-cells&#58;show;
  white-space&#58;normal;
  /*table-layout&#58;fixed;*/
&#125;
td, th
&#123;
  border-color&#58;black;
&#125;
Danke im Voraus für Hinweise!

lg.
David Scherr
Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!