auto width & overflow div

Ich erstelle eine Art Gitter für ein Projekt. Das Raster hat eine spezielle Anforderung (das ist der Grund, warum wir versuchen, eines im Haus zu erstellen), die mittleren Spalten müssen scrollbar sein.auto width & overflow div

Um die Situation zu veranschaulichen: Wir haben das Raster mehr oder weniger so erstellt: Es gibt ein Topcontainer div, das 3 andere divs den linken mittleren und rechten Container enthält. Der linke Container enthält Benutzerinformationen, die auf 4 Spalten verteilt sind. Das mittlere div enthält x Spalten (abhängig davon, wie viele Wochen der Manager ausgewählt hat) mit Textfeldern, in denen die Stunden für einen bestimmten Mitarbeiter eingegeben werden können, das rechte div hat einige Spalten für Summen und Mittelwerte.

Um zu meiner Frage zu gelangen: Die linken Spalten, die userdata enthalten, sollten eine dynamische Breite haben, wenn ich das Steuerelement mit Daten vom Server (asp.net 2.0) oder wenn eine Zeile über Javascript hinzugefügt wird, und dem Benutzer ausgewählt ist, möchte ich Spalten in der linken Container links Größe horizontal bei Bedarf ändern, und dass eine zusätzliche Bildlaufleiste im Topcontainer erscheint (um eine vertikale Aufspaltung meiner div) Ich dachte, dass ein 2. Topcontainer div mit maximaler Breite und der topcontainer div mit overflow-x: scroll, + eine width: auto in meinen Spalten hätte den Trick gemacht, aber das scheint nicht zu funktionieren.

Kann mich jemand auf die richtige Spur bringen? Ich hoffe, dass meine Erklärung verständlich ist. Wie auch immer ich ein Bild hinzugefügt habe [Bild] [1] Grundsätzlich möchte ich meine linken Spalten an die Breite ihres Inhalts anpassen und auf der gleichen Ebene horizontal bleiben.

thx.

Quelle

2009-04-15 DavyR

das klingt wie viele Spalten: 4 + x + einige! Wolltest du für einige von ihnen Zeilen sagen? – wheresrhys

off Thema, aber ich würde nicht picasaweb Konto, das auf Ihre E-Mail-Adresse auf einer Website – IEnumerator

führt Nein, sie sind in der Tat alle Spalten. Jede Zeile enthält einige Datenfelder + bis zu 78 Stundenfelder (= Wochen für ein Jahr und eine halbe) Guter Punkt Thx, aber es war der einzige Service, der von unserem Firmennetzwerk verfügbar ist. Ich werde es heute Abend ändern. – DavyR

Ich bin ein großer Befürworter für tabellenloses CSS-Design, aber wenn Sie eine Tabelle benötigen, verwenden Sie eine Tabelle.

Hier ist ein Code, wo ich denke, ich habe dich angefangen.

Ich wollte die mittlere Spalte auf einen% des Bildschirms einstellen, aber es wird dann nicht scrollen. Es wird auf die Größe der inneren Tabelle erweitert.

Ich erwarte, dass Sie innere Tabellen zu jeder der 3 Spalten hinzufügen müssen, um Ihren Inhalt anzuzeigen.

<html> 
<head> 
<style> 
table { 
    width: 100%; 
} 
.left { 
    background: red; 
    width: 100px; 
} 
.right { 
    background: blue; 
    width: 100px; 
} 
.middle { 
    background: green; 
    width: 800px; 
    display: block; 
    overflow: scroll; 
} 
.inner { 
    width: 2000px; 
    height: 100px; 
    background: black; 
    display: block; 
} 
</style> 
<body> 
<table> 
<tr><th class="left">Left</th><th class="middle">Middle Central block<table class="inner">Inner table</table></th><th class="right">Right</th></tr> 
</table> 
</body> 
</html>

Quelle

2009-04-15 23:26:09

Thx Jon, ich habe damit herumgewirbelt, aber ich hatte viele Schwierigkeiten, die unzerstörbaren Zeilen/Zellen auf die gleiche Höhe wie die normalen Tabellenzeilen/Zellen auszurichten. Wie auch immer, ich benutzte ein schmutziges Javascript-Update, da mir die Zeit davon lief. Aber ich werde das Unerschütterliche im Hinterkopf behalten, um meinen aktuellen Code umzuformen, wenn etwas freie Zeit zur Verfügung steht. – DavyR

auto width & overflow div

Antwort

Verwandte Themen