Tabellen - Größe

[Acta]

Hi,

wenn mann ein Seitenlayout hat mit #left und #main.

Und dann ein Inhaltselement - Tabelle einbindet... und die gesamt Tabellenbreite über #inside hinausreicht wird die Tabelle ja standart Mäßig einfach abgeschnitten....

Gibt ne möglichkeit, dass statt des Abschneidens dann eine Scrollleiste eingeblendet wird?

[MacKP]

Hallo Acta,
was du suchst bzw. brauchst ist overflow:scroll.

Hier genaueres -> http://www.css4you.de/overflow.html

Viele Grüße

[Sauerwald]

Hi,

wenn mann ein Seitenlayout hat mit #left und #main.

Und dann ein Inhaltselement - Tabelle einbindet... und die gesamt Tabellenbreite über #inside hinausreicht wird die Tabelle ja standart Mäßig einfach abgeschnitten....

Hallo Leute,

kann man denn irgendwie verhindern?
Die Tabelle müßte nur etwas schmaler sein.
Versuche mit

.ce_table
{
	width:620px;

oder

.ce_table table
{
	width:620px;

brachten keinen Erfolg.

Danke für Eure Hilfe

Markus

[Sauerwald]

Hallo Leute,

ich habe mal einen screenshot dazu hochgeladen.
Ich weis garnicht ob es hier hineingehört oder unter Inhaltselemente Tabelle.
den width bezug habe ich da er ohne Wirkung ist beim screenshot entfernt.

Gruß

Markus

[kos]

Du musst dem umgebenden div die Eigenschaft overflow mitgeben, also

.ce_table
{
overflow:scroll;
......
}

Siehe hierzu z.B. bei selfhtml http://de.selfhtml.org/css/eigenscha...g.htm#overflow

[elwega]

hallo,

.ce_table  {width: 98%(oder 100%); overflow:scroll;margin:0 auto; }

[Sauerwald]

Hallo Leute,

ja das sieht schon besseraus.
Ist aber noch nicht ganz meine Lösung.
Ich hätte einfach nur gerne die Breite der Tabelle auf 98 oder 100 % damit man die ganze Tabelle auf einmal sieht und nicht etwas verdeckt wird wie im Screenshot zu sehen.
Trotzdem danke für die Hilfe

Gruß

Markus

[kos]

Ich hätte einfach nur gerne die Breite der Tabelle auf 98 oder 100 % damit man die ganze Tabelle auf einmal sieht und nicht etwas verdeckt wird wie im Screenshot zu sehen.

Hallo Markus,

dann solltest Du versuchen, an der Breite der einzelnen Tabellen-Spalten zu drehen.
Insbeondere diejenigen für Datum und Uhrzeit könnten deutlich schmaler sein (->Screenshot).

[Sauerwald]

Hallo Markus,

dann solltest Du versuchen, an der Breite der einzelnen Tabellen-Spalten zu drehen.
Insbeondere diejenigen für Datum und Uhrzeit könnten deutlich schmaler sein (->Screenshot).

Hallo Karl,

beim Inhaltselement Tabelle gibt es keine Möglichkeit das einzustellen.

Gruß

Markus

[Sebastian]

HI

Was ist mit den Klassen col_first, col_[nummer] und col_last?

Sebastian

[Sauerwald]

Ja das wäre möglich, aber warum kann man diesem Inhalteselement Tabelle nicht einfach sagen wie breit es sein sollte. Alle anderen Dinge sind ja so in Ordnung.

Gruß
Markus

[Sebastian]

HI

Weil Contao eben kein Klicki-Bunti-Homepage-Baukasten ist, sondern ein CMS, das gewisse Grundkenntnisse (HTML & CSS) eben einfach voraussetzt.
Was genau tut denn nun nicht?

Sebastian

[Sauerwald]

Hallo Leute,

ich habe mal einen screenshot dazu hochgeladen.
Ich weis garnicht ob es hier hineingehört oder unter Inhaltselemente Tabelle.
den width bezug habe ich da er ohne Wirkung ist beim screenshot entfernt.

Gruß

Markus

http://www.contao-community.de/attac...5&d=1303448928

Hi,

ja Kenntnisse sind schon vorhanden. Es ist halt schon schwierieg wenn trotz diverser css Befehle sich nichts an der Breite ändert.
Ich hoffe der Link mit dem Screenshot funktioniert, ansonsten weiter oben ist der Screenshot zu sehen.

Gruß

Markus

[kos]

.... Es ist halt schon schwierieg wenn trotz diverser css Befehle sich nichts an der Breite ändert.

Hallo Markus,

normalerweise richtet sich die Breite einer Tabellenspalte automatisch nach dem breitesten Inhaltselement. Die Angabe von width für eine Tabellenspalte greift meines Wissens nicht. Aber hast Du vielleich irgendwo für die <td> ein padding eingebaut?

Kontrolliere das mal z.B. mit "Firebug".

Unter der Annahme, das die Daten in den ersten beiden Spalten für die gesamte Länge der Tabelle gleiche Breite haben, ist das für mich die einzige Erklärung dafür, dass die Tabellenzellen so breit sind.

[css-umsetzung]

normalerweise richtet sich die Breite einer Tabellenspalte automatisch nach dem breitesten Inhaltselement. Die Angabe von width für eine Tabellenspalte greift meines Wissens nicht. Aber hast Du vielleich irgendwo für die <td> ein padding eingebaut?

#

Doch, die Angabe width funktioniert, aber nur so lange, wie der Platz ausreicht.
Poste doch mal was für ein padding deine <td> Tags haben, auch ist interessant, ob du in den <td>, wie in deiner original Seite die im Netz ist <p> Tags hast, dann sind auch die css Angaben dieser Tags wichtig.

Hast du dafür keine Angaben gemacht, dann versuche es erst einmal mit

.ce_table td
{ padding:0px;
}

.ce_table p
{ padding:0px;
} 

Das hilft dir aber nur, die Abstände in den <td> Tags zu vermindern, ist der Inhalt zu lang, wird sich die Tabelle dennoch weiter ausbreiten.

[Sauerwald]

Hallo Leute,

hier mal der css code für die Tabellen

.ce_table table
{
	border-top:3px solid #dfdfdf;
	border-right:2px solid #dfdfdf;
	border-bottom:3px solid #dfdfdf;
	border-left:3px solid #dfdfdf;
	border-collapse:separate;
}

.ce_table td
{
	width:98%;
	overflow:auto;
	padding:0.2em 2em 0.2em 0.5em;
	border-right:1px solid #dfdfdf;
	border-bottom:1px solid #dfdfdf;
}

.ce_table
{
	width:100%;
	overflow:auto;
}

Mehr habe ich nicht zum Thema Tabelle in der CSS stehen.
Ich habe noch mal einen Screenshot angefügt.
Dort sieht man das mit firebug.


Gruß

Markus

[Andreas]

Hallo ihr,

soviel ich weiß, ist die Breitenangabe für Tabellen immer automatisch eine Mindest-Breitenangabe. Damit eine Breitenangabe auf Tabellen immer greift müsste man "table {table-layout:fixed}" hinzufügen. Ohne es jetzt nochmal überprüft zu haben.

Gruß Andreas

[css-umsetzung]

Damit eine Breitenangabe auf Tabellen immer greift müsste man "table {table-layout:fixed}" hinzufügen.

Nein, da ist leider falsch, diese Angabe sorgt eher dafür, das dieser "zappelnde" Aufbau einer Seite die langsam lädt nicht zu sehen ist.
Das eine Tabelle sich dadurch "in allen Browsern" an vorgegebene Breiten hält ist da eher Wunschdenken.

@sauerwald

Ich würde zuerst das width:98% aus dem <td> heraus nehmen und das padding links und rechts erst einmal auf null setzen, der Tabelle würde ich eine Breite von 98% oder 100% geben, danach würde ich das padding der <td> dann so lange anpassen bis es gut aussieht, sofern dass dann überhaupt noch notwendig ist.

das was du über firebug zeigst, ist komplett uninteressant, da es wie ich schon sagte viel wichtiges ist, was in den <td> tags enthalten ist (reiner Text oder Text, zum Beispiel in einem <p> Tag).

Im Zweifelsfall musst du eben jede Spalte gesondert formatieren damit überall die optimalen Abstände vorhanden sind.

[Andreas]

Nein, da ist leider falsch, ...

Es wird allerdings vom W3C so beschrieben. Und wenn du dir mal das Beispiel von dieser Seite hier http://de.selfhtml.org/css/eigenscha...ble_layout.htm ansiehst, dann schalte mal das table-layout von allen Tabellen aus, oder auf auto, und gib dann für alle Tabellen eine Breite von 15% und dann mal 150px ein. Dann siehst du, dass die Tabellen im Modus table-layout:auto (default) sich nicht an die Breitenangabe halten, ein overflow:scroll oder auto nützt da auch nichts. Im Modus table-layout:fixed halten sich die Browser aber sehr wohl an die Breitenangabe. Man kann also sagen, dass die Eigenschaft table-layout:fixed für Tabellen in etwa das ist, was overflow:hidden für DIVs ist.

Die Aussage, dass meine Aussage falsch sei, ist also leider falsch ;-)

Gruß Andreas

[Andreas]

...aber warum kann man diesem Inhalteselement Tabelle nicht einfach sagen wie breit es sein sollte. ...

Das kannst du hiermit.

.ce_table table {
  table-layout: fixed;
  width: 100%;
}

Vergiss das overflow:... bei Tabellen und Zellen, das greift dort nicht.

Gruß Andreas

[css-umsetzung]

Die Aussage, dass meine Aussage falsch sei, ist also leider falsch ;-)

Ich wollte dir auch nicht zu nahe treten

Es ist ja schon lange her das ich mit Tabellen beschäftigen musste weil alle der Meinung waren damit Ihre Layouts zu machen und damals ging das "nur" mit dem Explorer und war daher wertlos.

Also habe ich mal schnell einen kleinen "reellen" Versuchsaufbau gemacht bei dem der jeweilige Browser auch damit klar kommen muss, dass er etwas nicht umbrechen kann.

Wie erwartet bekommen die Browser dann einen mittleren Infarkt
Was mich aber verwundert hat, dass dann die Option overflow:hidden bei einem <td> greift und genau das macht was sie sollte (abschneiden)

Hier der kleine Testaufbau

[Andreas]

Jo, das ist aber auch das einzige, was overflow hier bewirkt mit 'hidden' ein Überschwappen in die benachbarte Zelle. Aber nix mit Scrollbalken, 'auto' usw.

Übrigens siehst du hier auch, dass Breitenangaben teilweise wenig Sinn machen, besonders ohne table-layout:fixed, wenn überhaupt, dann haben deine 20% Spalten mal eine Breite von 25% in Verbindung mit fixed, weils eben nur 4 sind. Und auch die 100% oder 98% machen da nix, weil es eben ein Mindestwert ist, aber der Inhalt hat Vorrang vor den Breitenangaben, solange man im Modus auto ist.

Wenn er also eine feste Tabellengröße angibt (mit fixed), sollte er die Spalten, bei welchen die Werte fest liegen, Datum usw., mit Breitenangaben einstellen, so das für die nicht berechenbaren Inhalte der restliche Platz zur Verfügung steht. Und dann darauf achten, das dort keine übergroßen Elemente drin auftauchen.

Übrigens ist mir immer noch unklar, warum so viele Leute die HTML-Attribute CELLPADDING und CELLSPACING mit Wert Null in Tabellen einbauen. Eine Tabelle ist semantisch gesehen dafür gedacht, tabelarische Inhalte darzustellen, deshalb hat das HTML-Element TABLE vom Browserhersteller ein wenig Padding zu den Rändern hin bekommen. Indem diese Werte auf Null gesetzt werden, sind diese tabelarischen Werte teils sehr schwer optisch zu erfassen. Warum macht ihr das? Hat doch keinen Sinn, außer, dass man die Daten ohne CSS dann schlechter lesen kann.

Gruß Andreas

[css-umsetzung]

Übrigens ist mir immer noch unklar, warum so viele Leute die HTML-Attribute CELLPADDING und CELLSPACING mit Wert Null in Tabellen einbauen. Eine Tabelle ist semantisch gesehen dafür gedacht, tabelarische Inhalte darzustellen............

Aus dem gleichem Grund, aus denen man seine kompletten styles auf null bringt, man will es selbst in der Hand haben, wie etwas auszusehen hat

Das zählt wieder zu den Glaubensfragen die jeder Webworker mit sich selbst ausmachen muss und eine Tabelle die ich im Netz "innerhalb einer Webseite" zeige wird in der Regel über ein css formatiert.

[Sauerwald]

Das kannst du hiermit.

.ce_table table {
  table-layout: fixed;
  width: 100%;
}

Vergiss das overflow:... bei Tabellen und Zellen, das greift dort nicht.

Gruß Andreas

Danke Andreas,

so nun klappt es auch.

Vielen Dank für die Hilfe

Gruß

Markus