Nein darauf vertrauen kann man nicht, das ist wahr. War ja auch nur ´ne Möglichkeit. Ich würde an Deiner Stelle von einer "Durchschnittsfensterhöhe" ausgehen. Bei einer Annahme der Bildschirmgröße von 1024x768 ist man da doch gut bedient.
vertikal Fixed, horizontal scrollbar
-
-
Das mit der Höhe muss ich mir mal noch durch den Kopf gehen lassen. Vielleicht finde ich dafür noch eine Lösung. Was mich aber am meisten derzeit ärgert ist das das scrollen durch das overflow: hidden; in #inhalt für die obere (fixe) Tabelle verhindert wird.
Hast du da vielleicht eine Idee wie das gelöst werden kann, bzw woran das liegt? -
Wenn Du Dir den Code ansiehst erkennst Du auch den Grund. Die Tabelle, die ich Dir angepasst habe ist etwas anders codiert. Lass das mit dem overflow in #inhalt und setz einfach die Tabelle rein. Noch ein paar Anpassungen mit Deinen Klassen und dann kann man na die Höhe durch JS denken, wenn es auch zu als Dreingabe zu sehen ist. Ich schtze 90% aller User habe eh´JS eingeschaltet. Die wenigsten kümmern sich darum.
-
So, ich habe ein Lösung gefunden die mich fast zufrieden stellt.
Das einziege Problem was ich jetzt noch habe ist, das bei zu kleinem Fenster die 2. Tabelle nicht ganz rechts anliegt.Hier einfach mal der Code:
HTML
Alles anzeigen<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"> <title> Stu Nicholls | CSSplay | CSS scrolling tables</title> <meta name="Author" content="Stu Nicholls"> <meta name="Keywords" content= "cssplay, css, play, Cascading, Style, Sheets, experiments, demonstrations, table, scrolling, information, cells" /> <meta name="Description" content="CSS - Cutting edge Cascading Style Sheets. Experiments in CSS"> <meta http-equiv="imagetoolbar" content="no"> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"> <meta http-equiv="cache-control" content="no-cache"> <style type="text/css"> * { border: 0; margin: 0; padding: 0; } table tr { text-align: center;} html, body { background: #eee url(img/menu.png) no-repeat fixed 5px -230px;/*url(img/all.png)*/ top: 0; left: 0; width: 100%; height: 100%; margin: 0; padding: 0; font-family: Arial, Helvetica; font-size: 12px; color: #000; overflow: hidden; } #inhalt { xborder: 1px solid red; position: absolute; top: 120px; left: 17em; right: 0; bottom: 25px; margin: 0; padding: 0; overflow: auto; } thead { position: relative; top: 0; left: 0; min-width: 50em; max-width: 100%; height: 5em; margin: 0; padding: 0; } .tableone { margin: 0; padding: 0; width: 100%; background: #697210; color: #fff; } .tabletwo { xborder: 3px solid green; margin: 0; padding: 0 0 3em 0; } .tableone td, .tableone thead th { color: #fff; } .tableone tbody { color: #000; } .tabletwo td { background: #eee; color: #000; } .tabletwo tr.dk td { background: #ddd; color: #000; } #gebaeude_bauen { xdisplay: block; position: absolute; top: 6em; bottom: 0; max-width: 100%; min-width: 50em; overflow: auto; margin: 0; padding: 0; } tbody th, tbody td { xborder: 1px solid red; width: 10em; } .xxx { border: 1px solid red; } </style> </head> <body> <div id="inhalt"> <table class="tableone"> <thead> <tr class="kategorie"> <th>Arbeiter</th> <th>verfügbare Arbeitskräfte</th> <th>Energie</th> <th>Eisen</th> <th>Silizium</th> <th>Kohlenstoff</th> <th>Wasser</th> <th>Sauerstoff</th> <th>Wasserstoff</th> <th>Lagerstand</th> </tr> <tr> <td>30.000</td> <td>261</td> <td>35.587</td> <td>17.548.000.000</td> <td>19.824</td> <td>6.540</td> <td>654</td> <td>987</td> <td>98.785</td> <td>67 %</td> </tr> <tr> <td colspan="10"><h1>Gebäude errichten auf Planet "Kolonie 1" (555:555:A)</h1></td> </tr> </thead> <tbody> <tr> <td colspan="10"> <div id="gebaeude_bauen"> <table class="tabletwo"> <tr class="kategorie"> <th colspan="9">Gebäude</th> </tr> <tr> <td>Bauzeit</td> <td>Bevölkerung</td> <td>Energie</td> <td>Eisen</td> <td>Silizium</td> <td>Kohlenstoff</td> <td>Wasser</td> <td>Sauerstoff</td> <td>Wasserstoff</td> </tr> <tr> <td>11:11:11</td> <td>111</td> <td>111</td> <td>111</td> <td>111</td> <td>111</td> <td>111</td> <td>111</td> <td>111</td> </tr> <tr class="bau_auftrag"> <td colspan="9"><a href="" title="">Ausbauen auf Stufe X</a></td> </tr> <tr class="kategorie"> <th colspan="9">Gebäude</th> </tr> <tr> <td>Bauzeit</td> <td>Bevölkerung</td> <td>Energie</td> <td>Eisen</td> <td>Silizium</td> <td>Kohlenstoff</td> <td>Wasser</td> <td>Sauerstoff</td> <td>Wasserstoff</td> </tr> <tr> <td>11:11:11</td> <td>111</td> <td>111</td> <td>111</td> <td>111</td> <td>111</td> <td>111</td> <td>111</td> <td>111</td> </tr> <tr class="bau_auftrag"> <td colspan="9"><a href="" title="">Ausbauen auf Stufe X</a></td> </tr> <tr class="kategorie"> <th colspan="9">Gebäude</th> </tr> <tr> <td>Bauzeit</td> <td>Bevölkerung</td> <td>Energie</td> <td>Eisen</td> <td>Silizium</td> <td>Kohlenstoff</td> <td>Wasser</td> <td>Sauerstoff</td> <td>Wasserstoff</td> </tr> <tr> <td>11:11:11</td> <td><span class="fehler_res">300</span></td> <td>11</td> <td>11</td> <td>11</td> <td>11</td> <td>11</td> <td>11</td> <td>11</td> </tr> <tr class="bau_auftrag"> <td colspan="9" class="fehler_bauauftrag">Sie haben leider nicht genügend Rohstoffe um dieses Gebäude auszubauen.</td> </tr> <tr class="kategorie"> <th colspan="9">Gebäude</th> </tr> <tr> <td>Bauzeit</td> <td>Bevölkerung</td> <td>Energie</td> <td>Eisen</td> <td>Silizium</td> <td>Kohlenstoff</td> <td>Wasser</td> <td>Sauerstoff</td> <td>Wasserstoff</td> </tr> <tr> <td>11:11:11</td> <td>11</td> <td>11</td> <td>11</td> <td>11</td> <td>11</td> <td>11</td> <td>11</td> <td>11</td> </tr> <tr class="bau_auftrag"> <td colspan="9" class="fehler_bauauftrag">Sie können dieses Gebäude nicht ausbauen, da Sie nach dem Ausbau nicht mehr ausreichend Energie für ein Wohngebäude und nicht mehr ausreichend freie Bevölkerung für einen Solarpark haben.</td> </tr> <tr class="kategorie"> <th colspan="9">Gebäude</th> </tr> <tr> <td>Bauzeit</td> <td>Bevölkerung</td> <td>Energie</td> <td>Eisen</td> <td>Silizium</td> <td>Kohlenstoff</td> <td>Wasser</td> <td>Sauerstoff</td> <td>Wasserstoff</td> </tr> <tr> <td>11:11:11</td> <td>11</td> <td>11</td> <td>11</td> <td>11</td> <td>11</td> <td>11</td> <td>11</td> <td>11</td> </tr> <tr class="bau_auftrag"> <td colspan="9"><a href="" title="">Ausbauen auf Stufe X</a></td> </tr> <tr class="kategorie"> <th colspan="9">Gebäude</th> </tr> <tr> <td>Bauzeit</td> <td>Bevölkerung</td> <td>Energie</td> <td>Eisen</td> <td>Silizium</td> <td>Kohlenstoff</td> <td>Wasser</td> <td>Sauerstoff</td> <td>Wasserstoff</td> </tr> <tr> <td>11:11:11</td> <td>11</td> <td>11</td> <td>11</td> <td>11</td> <td>11</td> <td>11</td> <td>11</td> <td>11</td> </tr> <tr class="bau_auftrag"> <td colspan="9"><a href="" title="">Ausbauen auf Stufe X</a></td> </tr> <tr class="kategorie"> <th colspan="9">Gebäude</th> </tr> <tr> <td>Bauzeit</td> <td>Bevölkerung</td> <td>Energie</td> <td>Eisen</td> <td>Silizium</td> <td>Kohlenstoff</td> <td>Wasser</td> <td>Sauerstoff</td> <td>Wasserstoff</td> </tr> <tr> <td>11:11:11</td> <td>11</td> <td>11</td> <td>11</td> <td>11</td> <td>11</td> <td>11</td> <td>11</td> <td>11</td> </tr> <tr class="bau_auftrag"> <td colspan="9"><a href="" title="">Ausbauen auf Stufe X</a></td> </tr> <tr class="kategorie"> <th colspan="9">Gebäude</th> </tr> <tr> <td>Bauzeit</td> <td>Bevölkerung</td> <td>Energie</td> <td>Eisen</td> <td>Silizium</td> <td>Kohlenstoff</td> <td>Wasser</td> <td>Sauerstoff</td> <td>Wasserstoff</td> </tr> <tr> <td>11:11:11</td> <td>11</td> <td>11</td> <td>11</td> <td>11</td> <td>11</td> <td>11</td> <td>11</td> <td>11</td> </tr> <tr class="bau_auftrag"> <td colspan="9"><a href="" title="">Ausbauen auf Stufe X</a></td> </tr> <tr class="kategorie"> <th colspan="9">Gebäude</th> </tr> <tr> <td>Bauzeit</td> <td>Bevölkerung</td> <td>Energie</td> <td>Eisen</td> <td>Silizium</td> <td>Kohlenstoff</td> <td>Wasser</td> <td>Sauerstoff</td> <td>Wasserstoff</td> </tr> <tr> <td>11:11:11</td> <td>11</td> <td>11</td> <td>11</td> <td>11</td> <td>11</td> <td>11</td> <td>11</td> <td>11</td> </tr> <tr class="bau_auftrag"> <td colspan="9"><a href="" title="">Ausbauen auf Stufe X</a></td> </tr> <tr class="kategorie"> <th colspan="9">Gebäude</th> </tr> <tr> <td>Bauzeit</td> <td>Bevölkerung</td> <td>Energie</td> <td>Eisen</td> <td>Silizium</td> <td>Kohlenstoff</td> <td>Wasser</td> <td>Sauerstoff</td> <td>Wasserstoff</td> </tr> <tr> <td>11:11:11</td> <td>11</td> <td>11</td> <td>11</td> <td>11</td> <td>11</td> <td>11</td> <td>11</td> <td>11</td> </tr> <tr class="bau_auftrag"> <td colspan="9"><a href="" title="">Ausbauen auf Stufe X</a></td> </tr> </table> </div> </td></tr> </tbody> </table> </div> </body> </html>
Ansonsten hatte ich auch noch eine andere Lösung in der der Taballenkopf nie mitscrollt und halt nur bis zu einer bestimmten breite sichtbar ist... was mich aber nicht 100% zufrieden stellt aber erstmal besser funktioniert : )
HTML
Alles anzeigen<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"> <title> Stu Nicholls | CSSplay | CSS scrolling tables</title> <meta name="Author" content="Stu Nicholls"> <meta name="Keywords" content= "cssplay, css, play, Cascading, Style, Sheets, experiments, demonstrations, table, scrolling, information, cells"> <meta name="Description" content="CSS - Cutting edge Cascading Style Sheets. Experiments in CSS"> <meta http-equiv="imagetoolbar" content="no"> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"> <meta http-equiv="cache-control" content="no-cache"> <style type="text/css"> * { border: 0; margin: 0; padding: 0; } table tr { text-align: center;} html, body { background: #eee url(img/menu.png) no-repeat fixed 5px -230px;/*url(img/all.png)*/ top: 0; left: 0; width: 100%; height: 100%; margin: 0; padding: 0; font-family: Arial, Helvetica; font-size: 12px; color: #000; overflow: hidden; } #inhalt { xborder: 1px solid red; position: absolute; top: 120px; left: 17em; right: 0; bottom: 25px; margin: 0; padding: 0; overflow: hidden; } thead { height: 5em; margin: 0; padding: 0; } .tableone { margin: 0; padding: 0; width: 100%; background: #697210; color: #fff; } .tabletwo { xborder: 3px solid green; margin: 0; padding: 0 0 3em 0; } .tableone td, .tableone thead th { color: #fff; } .tableone tbody { color: #000; } .tabletwo td { background: #eee; color: #000; } .tabletwo tr.dk td { background: #ddd; color: #000; } #gebaeude_bauen { display: block; position: absolute; top: 6em; bottom: 0; width: 100%; overflow: auto; margin: 0; padding: 0; } thead { white-space:nowrap; } </style> </head> <body> <div id="inhalt"> <table class="tableone"> <thead> <tr class="kategorie"> <th>Arbeiter</th> <th>verfügbare Arbeitskräfte</th> <th>Energie</th> <th>Eisen</th> <th>Silizium</th> <th>Kohlenstoff</th> <th>Wasser</th> <th>Sauerstoff</th> <th>Wasserstoff</th> <th>Lagerstand</th> </tr> <tr> <td>30.000</td> <td>261</td> <td>35.587</td> <td>17.548.000.000</td> <td>19.824</td> <td>6.540</td> <td>654</td> <td>987</td> <td>98.785</td> <td>67 %</td> </tr> <tr> <td colspan="10"><h1>Gebäude errichten auf Planet "Kolonie 1" (555:555:A)</h1></td> </tr> </thead> <tbody> <tr> <td colspan="10"> <div id="gebaeude_bauen"> <table class="tabletwo"> <tr class="kategorie"> <th colspan="9">Gebäude</th> </tr> <tr> <td>Bauzeit</td> <td>Bevölkerung</td> <td>Energie</td> <td>Eisen</td> <td>Silizium</td> <td>Kohlenstoff</td> <td>Wasser</td> <td>Sauerstoff</td> <td>Wasserstoff</td> </tr> <tr> <td>11:11:11</td> <td>111</td> <td>111</td> <td>111</td> <td>111</td> <td>111</td> <td>111</td> <td>111</td> <td>111</td> </tr> <tr class="bau_auftrag"> <td colspan="9"><a href="" title="">Ausbauen auf Stufe X</a></td> </tr> <tr class="kategorie"> <th colspan="9">Gebäude</th> </tr> <tr> <td>Bauzeit</td> <td>Bevölkerung</td> <td>Energie</td> <td>Eisen</td> <td>Silizium</td> <td>Kohlenstoff</td> <td>Wasser</td> <td>Sauerstoff</td> <td>Wasserstoff</td> </tr> <tr> <td>11:11:11</td> <td>111</td> <td>111</td> <td>111</td> <td>111</td> <td>111</td> <td>111</td> <td>111</td> <td>111</td> </tr> <tr class="bau_auftrag"> <td colspan="9"><a href="" title="">Ausbauen auf Stufe X</a></td> </tr> <tr class="kategorie"> <th colspan="9">Gebäude</th> </tr> <tr> <td>Bauzeit</td> <td>Bevölkerung</td> <td>Energie</td> <td>Eisen</td> <td>Silizium</td> <td>Kohlenstoff</td> <td>Wasser</td> <td>Sauerstoff</td> <td>Wasserstoff</td> </tr> <tr> <td>11:11:11</td> <td><span class="fehler_res">300</span></td> <td>11</td> <td>11</td> <td>11</td> <td>11</td> <td>11</td> <td>11</td> <td>11</td> </tr> <tr class="bau_auftrag"> <td colspan="9" class="fehler_bauauftrag">Sie haben leider nicht genügend Rohstoffe um dieses Gebäude auszubauen.</td> </tr> <tr class="kategorie"> <th colspan="9">Gebäude</th> </tr> <tr> <td>Bauzeit</td> <td>Bevölkerung</td> <td>Energie</td> <td>Eisen</td> <td>Silizium</td> <td>Kohlenstoff</td> <td>Wasser</td> <td>Sauerstoff</td> <td>Wasserstoff</td> </tr> <tr> <td>11:11:11</td> <td>11</td> <td>11</td> <td>11</td> <td>11</td> <td>11</td> <td>11</td> <td>11</td> <td>11</td> </tr> <tr class="bau_auftrag"> <td colspan="9" class="fehler_bauauftrag">Sie können dieses Gebäude nicht ausbauen, da Sie nach dem Ausbau nicht mehr ausreichend Energie für ein Wohngebäude und nicht mehr ausreichend freie Bevölkerung für einen Solarpark haben.</td> </tr> <tr class="kategorie"> <th colspan="9">Gebäude</th> </tr> <tr> <td>Bauzeit</td> <td>Bevölkerung</td> <td>Energie</td> <td>Eisen</td> <td>Silizium</td> <td>Kohlenstoff</td> <td>Wasser</td> <td>Sauerstoff</td> <td>Wasserstoff</td> </tr> <tr> <td>11:11:11</td> <td>11</td> <td>11</td> <td>11</td> <td>11</td> <td>11</td> <td>11</td> <td>11</td> <td>11</td> </tr> <tr class="bau_auftrag"> <td colspan="9"><a href="" title="">Ausbauen auf Stufe X</a></td> </tr> <tr class="kategorie"> <th colspan="9">Gebäude</th> </tr> <tr> <td>Bauzeit</td> <td>Bevölkerung</td> <td>Energie</td> <td>Eisen</td> <td>Silizium</td> <td>Kohlenstoff</td> <td>Wasser</td> <td>Sauerstoff</td> <td>Wasserstoff</td> </tr> <tr> <td>11:11:11</td> <td>11</td> <td>11</td> <td>11</td> <td>11</td> <td>11</td> <td>11</td> <td>11</td> <td>11</td> </tr> <tr class="bau_auftrag"> <td colspan="9"><a href="" title="">Ausbauen auf Stufe X</a></td> </tr> <tr class="kategorie"> <th colspan="9">Gebäude</th> </tr> <tr> <td>Bauzeit</td> <td>Bevölkerung</td> <td>Energie</td> <td>Eisen</td> <td>Silizium</td> <td>Kohlenstoff</td> <td>Wasser</td> <td>Sauerstoff</td> <td>Wasserstoff</td> </tr> <tr> <td>11:11:11</td> <td>11</td> <td>11</td> <td>11</td> <td>11</td> <td>11</td> <td>11</td> <td>11</td> <td>11</td> </tr> <tr class="bau_auftrag"> <td colspan="9"><a href="" title="">Ausbauen auf Stufe X</a></td> </tr> <tr class="kategorie"> <th colspan="9">Gebäude</th> </tr> <tr> <td>Bauzeit</td> <td>Bevölkerung</td> <td>Energie</td> <td>Eisen</td> <td>Silizium</td> <td>Kohlenstoff</td> <td>Wasser</td> <td>Sauerstoff</td> <td>Wasserstoff</td> </tr> <tr> <td>11:11:11</td> <td>11</td> <td>11</td> <td>11</td> <td>11</td> <td>11</td> <td>11</td> <td>11</td> <td>11</td> </tr> <tr class="bau_auftrag"> <td colspan="9"><a href="" title="">Ausbauen auf Stufe X</a></td> </tr> <tr class="kategorie"> <th colspan="9">Gebäude</th> </tr> <tr> <td>Bauzeit</td> <td>Bevölkerung</td> <td>Energie</td> <td>Eisen</td> <td>Silizium</td> <td>Kohlenstoff</td> <td>Wasser</td> <td>Sauerstoff</td> <td>Wasserstoff</td> </tr> <tr> <td>11:11:11</td> <td>11</td> <td>11</td> <td>11</td> <td>11</td> <td>11</td> <td>11</td> <td>11</td> <td>11</td> </tr> <tr class="bau_auftrag"> <td colspan="9"><a href="" title="">Ausbauen auf Stufe X</a></td> </tr> <tr class="kategorie"> <th colspan="9">Gebäude</th> </tr> <tr> <td>Bauzeit</td> <td>Bevölkerung</td> <td>Energie</td> <td>Eisen</td> <td>Silizium</td> <td>Kohlenstoff</td> <td>Wasser</td> <td>Sauerstoff</td> <td>Wasserstoff</td> </tr> <tr> <td>11:11:11</td> <td>11</td> <td>11</td> <td>11</td> <td>11</td> <td>11</td> <td>11</td> <td>11</td> <td>11</td> </tr> <tr class="bau_auftrag"> <td colspan="9"><a href="" title="">Ausbauen auf Stufe X</a></td> </tr> </table> </div> </td></tr> </tbody> </table> </div> </body> </html>
-
-
Mein Problem ist das hier:
[Blockierte Grafik: http://www.rise-in-time.de/docs/bilder/Image3.png]
[Blockierte Grafik: http://www.rise-in-time.de/docs/bilder/Image4.png]Leider hilft mir da das width: 100%; in .tabletwo nicht.
-
Ok und hier nochmal für IE7/IE8,FF,Opera,Chrome und Safari:
HTML
Alles anzeigen<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"> <title>Stu Nicholls | CSSplay | CSS scrolling tables</title> <meta name="Author" content="Stu Nicholls"> <meta name="Keywords" content= "cssplay, css, play, Cascading, Style, Sheets, experiments, demonstrations, table, scrolling, information, cells"> <meta name="Description" content="CSS - Cutting edge Cascading Style Sheets. Experiments in CSS"> <meta http-equiv="imagetoolbar" content="no"> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"> <meta http-equiv="cache-control" content="no-cache"> <style type="text/css"> * {border: 0;margin: 0;padding: 0;} table tr {text-align: center;line-height:1.5em;height:1.5em;} html, body {background: #eee url(img/menu.png) no-repeat fixed 5px -230px;/*url(img/all.png)*/top: 0;left: 0;width: 100%;height: 100%;margin: 0;padding: 0;font-family: Arial, Helvetica;font-size: 12px;color: #000;overflow: hidden;} #inhalt {xborder: 1px solid red;position: absolute;top: 120px;left: 17em;right: 0;bottom: 25px;margin: 0;padding: 0;overflow: hidden;} thead {margin: 0;padding: 0;} .tableone {margin: 0;padding: 0;width: 100%;background: #697210;color: #fff;} .tabletwo {xborder: 3px solid green;margin: 0;width:100%;padding: 0 0 3em 0;} .tableone td, .tableone thead th {color: #fff;line-height:1.5em;height:1.5em;} .tableone tbody {color: #000;} .tabletwo td {background: #eee;color: #000;line-height:1.5em;height:1.5em;} .tabletwo tr.dk td {background: #ddd;color: #000;line-height:1.5em;height:1.5em;} #gebaeude_bauen {display: block;position: absolute;top: 7em;left:0;bottom: 0;width: 100%;overflow: auto;margin: 0;padding: 0;} thead {white-space:nowrap;} </style> </head> <body> <div id="inhalt"> <table class="tableone"> <thead> <tr class="kategorie"> <th>Arbeiter</th> <th>verfügbare Arbeitskräfte</th> <th>Energie</th> <th>Eisen</th> <th>Silizium</th> <th>Kohlenstoff</th> <th>Wasser</th> <th>Sauerstoff</th> <th>Wasserstoff</th> <th>Lagerstand</th> </tr> <tr> <td>30.000</td> <td>261</td> <td>35.587</td> <td>17.548.000.000</td> <td>19.824</td> <td>6.540</td> <td>654</td> <td>987</td> <td>98.785</td> <td>67 %</td> </tr> <tr> <td colspan="10">Gebäude errichten auf Planet "Kolonie 1" (555:555:A)</td> </tr> </thead> <tbody> <tr> <td colspan="10"><div id="gebaeude_bauen"> <table class="tabletwo"> <tr class="kategorie"> <th colspan="9">Gebäude</th> </tr> <tr> <td>Bauzeit</td> <td>Bevölkerung</td> <td>Energie</td> <td>Eisen</td> <td>Silizium</td> <td>Kohlenstoff</td> <td>Wasser</td> <td>Sauerstoff</td> <td>Wasserstoff</td> </tr> <tr> <td>11:11:11</td> <td>111</td> <td>111</td> <td>111</td> <td>111</td> <td>111</td> <td>111</td> <td>111</td> <td>111</td> </tr> <tr class="bau_auftrag"> <td colspan="9"><a href="" title="">Ausbauen auf Stufe X</a></td> </tr> <tr class="kategorie"> <th colspan="9">Gebäude</th> </tr> <tr> <td>Bauzeit</td> <td>Bevölkerung</td> <td>Energie</td> <td>Eisen</td> <td>Silizium</td> <td>Kohlenstoff</td> <td>Wasser</td> <td>Sauerstoff</td> <td>Wasserstoff</td> </tr> <tr> <td>11:11:11</td> <td>111</td> <td>111</td> <td>111</td> <td>111</td> <td>111</td> <td>111</td> <td>111</td> <td>111</td> </tr> <tr class="bau_auftrag"> <td colspan="9"><a href="" title="">Ausbauen auf Stufe X</a></td> </tr> <tr class="kategorie"> <th colspan="9">Gebäude</th> </tr> <tr> <td>Bauzeit</td> <td>Bevölkerung</td> <td>Energie</td> <td>Eisen</td> <td>Silizium</td> <td>Kohlenstoff</td> <td>Wasser</td> <td>Sauerstoff</td> <td>Wasserstoff</td> </tr> <tr> <td>11:11:11</td> <td><span class="fehler_res">300</span></td> <td>11</td> <td>11</td> <td>11</td> <td>11</td> <td>11</td> <td>11</td> <td>11</td> </tr> <tr class="bau_auftrag"> <td colspan="9" class="fehler_bauauftrag">Sie haben leider nicht genügend Rohstoffe um dieses Gebäude auszubauen.</td> </tr> <tr class="kategorie"> <th colspan="9">Gebäude</th> </tr> <tr> <td>Bauzeit</td> <td>Bevölkerung</td> <td>Energie</td> <td>Eisen</td> <td>Silizium</td> <td>Kohlenstoff</td> <td>Wasser</td> <td>Sauerstoff</td> <td>Wasserstoff</td> </tr> <tr> <td>11:11:11</td> <td>11</td> <td>11</td> <td>11</td> <td>11</td> <td>11</td> <td>11</td> <td>11</td> <td>11</td> </tr> <tr class="bau_auftrag"> <td colspan="9" class="fehler_bauauftrag">Sie können dieses Gebäude nicht ausbauen, da Sie nach dem Ausbau nicht mehr ausreichend Energie für ein Wohngebäude und nicht mehr ausreichend freie Bevölkerung für einen Solarpark haben.</td> </tr> <tr class="kategorie"> <th colspan="9">Gebäude</th> </tr> <tr> <td>Bauzeit</td> <td>Bevölkerung</td> <td>Energie</td> <td>Eisen</td> <td>Silizium</td> <td>Kohlenstoff</td> <td>Wasser</td> <td>Sauerstoff</td> <td>Wasserstoff</td> </tr> <tr> <td>11:11:11</td> <td>11</td> <td>11</td> <td>11</td> <td>11</td> <td>11</td> <td>11</td> <td>11</td> <td>11</td> </tr> <tr class="bau_auftrag"> <td colspan="9"><a href="" title="">Ausbauen auf Stufe X</a></td> </tr> <tr class="kategorie"> <th colspan="9">Gebäude</th> </tr> <tr> <td>Bauzeit</td> <td>Bevölkerung</td> <td>Energie</td> <td>Eisen</td> <td>Silizium</td> <td>Kohlenstoff</td> <td>Wasser</td> <td>Sauerstoff</td> <td>Wasserstoff</td> </tr> <tr> <td>11:11:11</td> <td>11</td> <td>11</td> <td>11</td> <td>11</td> <td>11</td> <td>11</td> <td>11</td> <td>11</td> </tr> <tr class="bau_auftrag"> <td colspan="9"><a href="" title="">Ausbauen auf Stufe X</a></td> </tr> <tr class="kategorie"> <th colspan="9">Gebäude</th> </tr> <tr> <td>Bauzeit</td> <td>Bevölkerung</td> <td>Energie</td> <td>Eisen</td> <td>Silizium</td> <td>Kohlenstoff</td> <td>Wasser</td> <td>Sauerstoff</td> <td>Wasserstoff</td> </tr> <tr> <td>11:11:11</td> <td>11</td> <td>11</td> <td>11</td> <td>11</td> <td>11</td> <td>11</td> <td>11</td> <td>11</td> </tr> <tr class="bau_auftrag"> <td colspan="9"><a href="" title="">Ausbauen auf Stufe X</a></td> </tr> <tr class="kategorie"> <th colspan="9">Gebäude</th> </tr> <tr> <td>Bauzeit</td> <td>Bevölkerung</td> <td>Energie</td> <td>Eisen</td> <td>Silizium</td> <td>Kohlenstoff</td> <td>Wasser</td> <td>Sauerstoff</td> <td>Wasserstoff</td> </tr> <tr> <td>11:11:11</td> <td>11</td> <td>11</td> <td>11</td> <td>11</td> <td>11</td> <td>11</td> <td>11</td> <td>11</td> </tr> <tr class="bau_auftrag"> <td colspan="9"><a href="" title="">Ausbauen auf Stufe X</a></td> </tr> <tr class="kategorie"> <th colspan="9">Gebäude</th> </tr> <tr> <td>Bauzeit</td> <td>Bevölkerung</td> <td>Energie</td> <td>Eisen</td> <td>Silizium</td> <td>Kohlenstoff</td> <td>Wasser</td> <td>Sauerstoff</td> <td>Wasserstoff</td> </tr> <tr> <td>11:11:11</td> <td>11</td> <td>11</td> <td>11</td> <td>11</td> <td>11</td> <td>11</td> <td>11</td> <td>11</td> </tr> <tr class="bau_auftrag"> <td colspan="9"><a href="" title="">Ausbauen auf Stufe X</a></td> </tr> <tr class="kategorie"> <th colspan="9">Gebäude</th> </tr> <tr> <td>Bauzeit</td> <td>Bevölkerung</td> <td>Energie</td> <td>Eisen</td> <td>Silizium</td> <td>Kohlenstoff</td> <td>Wasser</td> <td>Sauerstoff</td> <td>Wasserstoff</td> </tr> <tr> <td>11:11:11</td> <td>11</td> <td>11</td> <td>11</td> <td>11</td> <td>11</td> <td>11</td> <td>11</td> <td>11</td> </tr> <tr class="bau_auftrag"> <td colspan="9"><a href="" title="">Ausbauen auf Stufe X</a></td> </tr> </table> </div></td> </tr> </tbody> </table> </div> </body> </html>
-
Ich bin gerade bei dem anderen...
-
Das Problem ist und bleibt dem Browser etwas zum rechnen anzubieten. Das heißt die Tabelle vollständig zu formatieren (hier mit: line-height:1.5em;height:1.5em;). Das schränkt zwar etwas ein, mit der Formatierumg in em Werten sollte man aber damit leben können. Die <h1> Formatierung habe ich rausgenommen. Die Überschrift läßt sich aber wieder herstellen, in dem man die Zeile mit line-height:Xem;height:Xem; als Klasse festsetzt und die Überschrift entsprechend anpasst.
Das war übrigens auch der Sinn des "Style.Resets" erinnerst Du Dich (alles auf einen Standart setzen und dann akribisch alles formatieren)? -
So, ich habe nun eine Lösung gefunden nach langem suchen. Sie läuft bei mir unter FF, Opera und IE6. Sicher gibt es noch viele Sachen die man besser machen sollte aber ich stelle mich damit erstmal zufrieden. Ich bin dennoch für weitere Anregungen offen.
HTML
Alles anzeigen<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>CSS scrolling tables</title> <meta name="Author" content="Mathilda Kruschel"> <meta http-equiv="imagetoolbar" content="no"> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"> <meta http-equiv="cache-control" content="no-cache"> <style type="text/css"> /*allg. Reset der Elemente*/ /*BEGIN*/ html, body, div, span, applet, object, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline; } /*END*/ h1 { font-size: 2em; font-weight: bold;} #gebaeude_bauen table tr { text-align: center;line-height:1.5em;height:1.5em;} #gebaeude_bauen tr th { font-weight: bold;} html, body { background: #eee url(img/menu.png) no-repeat fixed 5px -230px;/*url(img/all.png)*/ top: 0; left: 0; width: 100%; height: 100%; margin: 0; padding: 0; font-family: Arial, Helvetica; font-size: 12px; color: #000; overflow: hidden; } #inhalt { position: absolute; top: 120px; left: 17em; right: 0; bottom: 25px; margin: 0; padding: 0; overflow: auto; } #gebaeude_bauen .tableone thead { position: relative; top: 0; left: 0; min-width: 52em; height: 5em; margin: 0; padding: 0; white-space:nowrap; } #gebaeude_bauen .tableone { margin: 0; padding: 0; width: 100%; } #gebaeude_bauen .tabletwo { width: 100%; margin: 0; padding: 0 0 3em 0; } #gebaeude_bauen #table_div { position: absolute; top: 6em; left: 0; right: 0; bottom: 0em; /*für opera müsste hier 1.3em hin damit es schön ist -> der vertikale scrollbalken das "nach unten" anzeigen kann bei zusätzlichem horizontalem scrollbalken*/ min-width: 57.3em; overflow: auto; margin: 0; padding: 0; } #gebaeude_bauen table.tabletwo th, #gebaeude_bauen table.tabletwo td { width: 10em; } #gebaeude_bauen { /*Platzhalter für weitere Stylemöglichkeiten*/ /* Kommentarzeichen entfernen wenn es genutzt werden soll. position: absolute; top: 0; bottom: 0; width: 100%; */ } </style> </head> <body> <div id="inhalt"> <div id="gebaeude_bauen"> <table class="tableone"> <thead> <tr class="kategorie"> <th>Arbeiter</th> <th>verfügbare Arbeitskräfte</th> <th>Energie</th> <th>Eisen</th> <th>Silizium</th> <th>Kohlenstoff</th> <th>Wasser</th> <th>Sauerstoff</th> <th>Wasserstoff</th> <th>Lagerstand</th> </tr> <tr> <td>30.000</td> <td>261</td> <td>35.587</td> <td>17.548.000.000</td> <td>19.824</td> <td>6.540</td> <td>654</td> <td>987</td> <td>98.785</td> <td>67 %</td> </tr> <tr> <td colspan="10"><h1>Gebäude errichten auf Planet "Kolonie 1" (555:555:A)</h1></td> </tr> </thead> <tbody> <tr> <td colspan="10"> <div id="table_div"> <table class="tabletwo"> <tr class="kategorie"> <th colspan="9">Planetenzentrale</th> </tr> <tr> <td>Bauzeit</td> <td>Bevölkerung</td> <td>Energie</td> <td>Eisen</td> <td>Silizium</td> <td>Kohlenstoff</td> <td>Wasser</td> <td>Sauerstoff</td> <td>Wasserstoff</td> </tr> <tr> <td>11:11:11</td> <td>111</td> <td>111</td> <td>111</td> <td>111</td> <td>111</td> <td>111</td> <td>111</td> <td>111</td> </tr> <tr class="bau_auftrag"> <td colspan="9"><a href="" title="">Ausbauen auf Stufe X</a></td> </tr> <tr class="kategorie"> <th colspan="9">Raumhafen</th> </tr> <tr> <td>Bauzeit</td> <td>Bevölkerung</td> <td>Energie</td> <td>Eisen</td> <td>Silizium</td> <td>Kohlenstoff</td> <td>Wasser</td> <td>Sauerstoff</td> <td>Wasserstoff</td> </tr> <tr> <td>11:11:11</td> <td>111</td> <td>111</td> <td>111</td> <td>111</td> <td>111</td> <td>111</td> <td>111</td> <td>111</td> </tr> <tr class="bau_auftrag"> <td colspan="9"><a href="" title="">Ausbauen auf Stufe X</a></td> </tr> <tr class="kategorie"> <th colspan="9">Wohngebäude</th> </tr> <tr> <td>Bauzeit</td> <td>Bevölkerung</td> <td>Energie</td> <td>Eisen</td> <td>Silizium</td> <td>Kohlenstoff</td> <td>Wasser</td> <td>Sauerstoff</td> <td>Wasserstoff</td> </tr> <tr> <td>11:11:11</td> <td class="fehler_res">300</td> <td>11</td> <td>11</td> <td>11</td> <td>11</td> <td>11</td> <td>11</td> <td>11</td> </tr> <tr class="bau_auftrag"> <td colspan="9" class="fehler_bauauftrag">Sie haben leider nicht genügend Rohstoffe um dieses Gebäude auszubauen.</td> </tr> <tr class="kategorie"> <th colspan="9">Solarpark</th> </tr> <tr> <td>Bauzeit</td> <td>Bevölkerung</td> <td>Energie</td> <td>Eisen</td> <td>Silizium</td> <td>Kohlenstoff</td> <td>Wasser</td> <td>Sauerstoff</td> <td>Wasserstoff</td> </tr> <tr> <td>11:11:11</td> <td>11</td> <td>11</td> <td>11</td> <td>11</td> <td>11</td> <td>11</td> <td>11</td> <td>11</td> </tr> <tr class="bau_auftrag"> <td colspan="9" class="fehler_bauauftrag">Sie können dieses Gebäude nicht ausbauen, da Sie nach dem Ausbau nicht mehr ausreichend Energie für ein Wohngebäude und nicht mehr ausreichend freie Bevölkerung für einen Solarpark haben.</td> </tr> <tr class="kategorie"> <th colspan="9">Eisenmine</th> </tr> <tr> <td>Bauzeit</td> <td>Bevölkerung</td> <td>Energie</td> <td>Eisen</td> <td>Silizium</td> <td>Kohlenstoff</td> <td>Wasser</td> <td>Sauerstoff</td> <td>Wasserstoff</td> </tr> <tr> <td>11:11:11</td> <td>11</td> <td>11</td> <td>11</td> <td>11</td> <td>11</td> <td>11</td> <td>11</td> <td>11</td> </tr> <tr class="bau_auftrag"> <td colspan="9"><a href="" title="">Ausbauen auf Stufe X</a></td> </tr> <tr class="kategorie"> <th colspan="9">Siliziumraffinerie</th> </tr> <tr> <td>Bauzeit</td> <td>Bevölkerung</td> <td>Energie</td> <td>Eisen</td> <td>Silizium</td> <td>Kohlenstoff</td> <td>Wasser</td> <td>Sauerstoff</td> <td>Wasserstoff</td> </tr> <tr> <td>11:11:11</td> <td>11</td> <td>11</td> <td>11</td> <td>11</td> <td>11</td> <td>11</td> <td>11</td> <td>11</td> </tr> <tr class="bau_auftrag"> <td colspan="9"><a href="" title="">Ausbauen auf Stufe X</a></td> </tr> <tr class="kategorie"> <th colspan="9">Kohlenstoffgewinnungsanlage</th> </tr> <tr> <td>Bauzeit</td> <td>Bevölkerung</td> <td>Energie</td> <td>Eisen</td> <td>Silizium</td> <td>Kohlenstoff</td> <td>Wasser</td> <td>Sauerstoff</td> <td>Wasserstoff</td> </tr> <tr> <td>11:11:11</td> <td>11</td> <td>11</td> <td>11</td> <td>11</td> <td>11</td> <td>11</td> <td>11</td> <td>11</td> </tr> <tr class="bau_auftrag"> <td colspan="9"><a href="" title="">Ausbauen auf Stufe X</a></td> </tr> <tr class="kategorie"> <th colspan="9">Bohrturm</th> </tr> <tr> <td>Bauzeit</td> <td>Bevölkerung</td> <td>Energie</td> <td>Eisen</td> <td>Silizium</td> <td>Kohlenstoff</td> <td>Wasser</td> <td>Sauerstoff</td> <td>Wasserstoff</td> </tr> <tr> <td>11:11:11</td> <td>11</td> <td>11</td> <td>11</td> <td>11</td> <td>11</td> <td>11</td> <td>11</td> <td>11</td> </tr> <tr class="bau_auftrag"> <td colspan="9"><a href="" title="">Ausbauen auf Stufe X</a></td> </tr> <tr class="kategorie"> <th colspan="9">Chemiefabrik</th> </tr> <tr> <td>Bauzeit</td> <td>Bevölkerung</td> <td>Energie</td> <td>Eisen</td> <td>Silizium</td> <td>Kohlenstoff</td> <td>Wasser</td> <td>Sauerstoff</td> <td>Wasserstoff</td> </tr> <tr> <td>11:11:11</td> <td>11</td> <td>11</td> <td>11</td> <td>11</td> <td>11</td> <td>11</td> <td>11</td> <td>11</td> </tr> <tr class="bau_auftrag"> <td colspan="9"><a href="" title="">Ausbauen auf Stufe X</a></td> </tr> <tr class="kategorie"> <th colspan="9">Recyclinganlage</th> </tr> <tr> <td>Bauzeit</td> <td>Bevölkerung</td> <td>Energie</td> <td>Eisen</td> <td>Silizium</td> <td>Kohlenstoff</td> <td>Wasser</td> <td>Sauerstoff</td> <td>Wasserstoff</td> </tr> <tr> <td>11:11:11</td> <td>11</td> <td>11</td> <td>11</td> <td>11</td> <td>11</td> <td>11</td> <td>11</td> <td>11</td> </tr> <tr class="bau_auftrag"> <td colspan="9"><a href="" title="">Ausbauen auf Stufe X</a></td> </tr> <tr class="kategorie"> <th colspan="9">Rohstofflager</th> </tr> <tr> <td>Bauzeit</td> <td>Bevölkerung</td> <td>Energie</td> <td>Eisen</td> <td>Silizium</td> <td>Kohlenstoff</td> <td>Wasser</td> <td>Sauerstoff</td> <td>Wasserstoff</td> </tr> <tr> <td>11:11:11</td> <td>11</td> <td>11</td> <td>11</td> <td>11</td> <td>11</td> <td>11</td> <td>11</td> <td>11</td> </tr> <tr class="bau_auftrag"> <td colspan="9"><a href="" title="">Ausbauen auf Stufe X</a></td> </tr> <tr class="kategorie"> <th colspan="9">Schiffsfabrik</th> </tr> <tr> <td>Bauzeit</td> <td>Bevölkerung</td> <td>Energie</td> <td>Eisen</td> <td>Silizium</td> <td>Kohlenstoff</td> <td>Wasser</td> <td>Sauerstoff</td> <td>Wasserstoff</td> </tr> <tr> <td>11:11:11</td> <td>11</td> <td>11</td> <td>11</td> <td>11</td> <td>11</td> <td>11</td> <td>11</td> <td>11</td> </tr> <tr class="bau_auftrag"> <td colspan="9"><a href="" title="">Ausbauen auf Stufe X</a></td> </tr> <tr class="kategorie"> <th colspan="9">Waffenfabrik</th> </tr> <tr> <td>Bauzeit</td> <td>Bevölkerung</td> <td>Energie</td> <td>Eisen</td> <td>Silizium</td> <td>Kohlenstoff</td> <td>Wasser</td> <td>Sauerstoff</td> <td>Wasserstoff</td> </tr> <tr> <td>11:11:11</td> <td>11</td> <td>11</td> <td>11</td> <td>11</td> <td>11</td> <td>11</td> <td>11</td> <td>11</td> </tr> <tr class="bau_auftrag"> <td colspan="9"><a href="" title="">Ausbauen auf Stufe X</a></td> </tr> <tr class="kategorie"> <th colspan="9">Forschungszentrum</th> </tr> <tr> <td>Bauzeit</td> <td>Bevölkerung</td> <td>Energie</td> <td>Eisen</td> <td>Silizium</td> <td>Kohlenstoff</td> <td>Wasser</td> <td>Sauerstoff</td> <td>Wasserstoff</td> </tr> <tr> <td>11:11:11</td> <td>11</td> <td>11</td> <td>11</td> <td>11</td> <td>11</td> <td>11</td> <td>11</td> <td>11</td> </tr> <tr class="bau_auftrag"> <td colspan="9"><a href="" title="">Ausbauen auf Stufe X</a></td> </tr> </table> </div> </td></tr> </tbody> </table> </div> </div> </body> </html>
Ergänzende CSS für den IE:
Code#gebaeude_bauen .tableone { width: 67.5em;} #gebaeude_bauen .tabletwo { width: 98%;} #gebaeude_bauen #table_div { position: absolute; top: 6em; left: 0; height: expression(document.body.clientHeight - 260 + "px");; width: 67.5em; } #gebaeude_bauen table.tabletwo th, #gebaeude_bauen table.tabletwo td { width: auto;}
-