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
<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
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="formate.css">
</head>
<body>
<?php
echo "<table border='1' style='width:{$_GET['table_width']}px;'>
<tr>
<th width='{$_GET['th0']}'>Bild</th>
<th width='{$_GET['th1']}'>Objekt-Nr.</th>
<th width='{$_GET['th2']}'>PLZ</th>
<th width='{$_GET['th3']}'>Ort</th>
<th width='{$_GET['th4']}'>Fläche</th>
<th width='{$_GET['th5']}'>Preis</th>
<th width='{$_GET['th6']}'>Kurzbeschreibung</th>
<th width='{$_GET['th7']}'>Exposee</th>
</tr>
</table>";
?>
</body>
</html>spaltenbreiten_ermitteln.php
<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 (tr_nr < 50) //Tabellen-Inhalt erzeugen
{
document.write("<tr>"); //Einzelne Zeilen erzeugen
td_nr = 0; //reset
while (td_nr < 8) //Einzelne Spalten erzeugen mit irgendwelchen Inhalt
{
anzahl_zeichen = Math.round(Math.random() * (td_nr + 2) * 2);
document.write("<td>");
zeichen_nr = 0;
inhalt = "";
while (zeichen_nr < anzahl_zeichen) //Inhalt mit unerschiedlicher Länge erzeugen
{
inhalt += zeichen_nr;
zeichen_nr++;
}
document.write(inhalt);
document.write("</td>");
td_nr++;
}
document.write("</tr>");
tr_nr++;
}
</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()
{
//window.alert("Jetzt geht es los!");
var spalten_nr = 0;
var spalten_breite = new Array(8);
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 (spalten_nr < anzahl_spalten) //einzelnen Spalten-Breiten ermitteln
{
spalten_breite[spalten_nr] = document.getElementsByTagName("th")[spalten_nr].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[spalten_nr]; //auch das darf nicht unversucht bleiben
spalten_breite[spalten_nr] = spalten_breite[spalten_nr] - korrektur_wert; //<v111> solange diese 'Umrechnung' bleibt, funktioniert es in firefox und iexplore einwandfrei
if (spalten_nr > 0)
{
url_parameter_liste += "&th" + spalten_nr + "=" + spalten_breite[spalten_nr];
}
else //spalten_nr = 0
{
url_parameter_liste += "?th" + spalten_nr + "=" + spalten_breite[spalten_nr];
}
spalten_nr++;
}
tabellen_breite = document.getElementById("haupttabelle").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 ;-[
document.getElementById("haupttabelle").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['spaltenbreiten_anpassen'].document.location.href = datei_mit_parametern;
}
spaltenbreite_aendern();
</script>
</body>
</html>formate.css
table
{
border-color:black;
border:1px;
border-collapse:collapse;
border-style:solid;
width:90%;
font-size:12pt;
empty-cells:show;
white-space:normal;
/*table-layout:fixed;*/
}
td, th
{
border-color:black;
}Danke im Voraus für Hinweise!
lg.
David Scherr