Spaltenbreiten von Tabellen

[Tom]

Hello,

Der NS Gecko hält sich nicht an     table-layout:fixed;

Er verbreitert die Spalten trotzdem, wenn der Text zu lang ist.

Wo muss ich suchen, damit er sich daran hält?

Die Spaltenbreite ist mit <colgroup> festgelegt, da der Tabellenbody ein eigenes DIV hat und keinen <th> haben kann.

Liebe Grüße aus http://www.braunschweig.de

Tom

[MudGuard]

Hi,

Der NS Gecko hält sich nicht an     table-layout:fixed;
Er verbreitert die Spalten trotzdem, wenn der Text zu lang ist.
Wo muss ich suchen, damit er sich daran hält?

overflow?

Die Spaltenbreite ist mit <colgroup> festgelegt, da der Tabellenbody ein eigenes DIV hat und keinen <th> haben kann.

Muß irgendjemand außer Dir diesen Satz verstehen?

cu,
Andreas

[Tom]

Hello,

Hi,

Der NS Gecko hält sich nicht an     table-layout:fixed;
Er verbreitert die Spalten trotzdem, wenn der Text zu lang ist.
Wo muss ich suchen, damit er sich daran hält?

overflow?

Die Spaltenbreite ist mit <colgroup> festgelegt, da der Tabellenbody ein eigenes DIV hat und keinen <th> haben kann.

Muß irgendjemand außer Dir diesen Satz verstehen?

Sorry, dachte, das wäre klar aus dem Codeschnipsel, aber das habe ich ja gar nicht abgeschickt, weil ich den anderen Fehler gefunden habe.
[Netscape interpretiert die Beitenangabe in <col> und in <th> unterschiedlich, währen MSIE eine gleiche Spaltenbreite daraus baut.]

NS Gecko:

<img src="http://bitworks.de/~selfHTML/Liste_Screenshot_Netscape.jpg" border="0" alt="">

Nur zur Anschauung, was ich da bastele. Die Verschiebung zwischen Head und Body habe ich wegbekommen.

Liebe Grüße aus http://www.braunschweig.de

Tom

[Christian Seiler]

Hallo Tom,

Der NS Gecko hält sich nicht an     table-layout:fixed;

Doch, tut er.

Er verbreitert die Spalten trotzdem, wenn der Text zu lang ist.

Nein, er hält sich lediglich an den Standard. Der besagt:

| The table's width may be specified explicitly with the 'width' property. A
| value of 'auto' (for both 'display: table' and 'display: inline-table')
| means use the automatic table layout algorithm.

Desweiteren:

| In this manner, the user agent can begin to lay out the table once the
| entire first row has been received. Cells in subsequent rows do not affect
| column widths. Any cell that has content that overflows uses the 'overflow'
| property to determine whether to clip the overflow content.

Folglich musst Du für die Tabelle eine Breite angeben, damit Mozilla table-layout:fixed; anwendet. Der IE verhält sich zwar hier "autorenfreundlicher" (er wendet table-layout: fixed; auch an, wenn die Tabelle selbst keine Breite hat, sondern nur die Spalten), aber nicht standardkonform.

Viele Grüße,
Christian

[Tom]

Hello Christian,

nette Idee das mit der Tabellenbreite.
Nun zerkloppt der Netscape mir alles:

<img src="http://bitworks.de/~selfHTML/Liste_Screenshot_Netscape02.jpg" border="0" alt="">

Liebe Grüße aus http://www.braunschweig.de

Tom

[Christian Seiler]

Hallo Tom,

nette Idee das mit der Tabellenbreite.
Nun zerkloppt der Netscape mir alles:

<img src="http://bitworks.de/~selfHTML/Liste_Screenshot_Netscape02.jpg" border="0" alt="">

Ich weiß ja nicht, wie Dein Code aussieht, aber bei mir funktioniert das im Mozilla und Opera (und IE vermutlich auch):
http://www.christian-seiler.de/temp/test-table-fixed.html

Viele Grüße,
Christian

[Tom]

Hello,

Ich weiß ja nicht, wie Dein Code aussieht, aber bei mir funktioniert das im Mozilla und Opera (und IE vermutlich auch):
http://www.christian-seiler.de/temp/test-table-fixed.html

Wenn Du das hinbekommst, muss ich das auch schaffen.
Nur nochmal zur Sicherheit: Sind "Mozilla" und "Netscape 7.0 Gecko" das Geiche?

Jetzt wollte ich eben schon nach dem CSS-Code fragen, aber es ist ja ein Link und kein Bild. Dann müsste ich also rankommen. Ich brauch wol mal Ne Pause *uff*

Liebe Grüße aus http://www.braunschweig.de

Tom

[Christian Seiler]

Hallo Tom,

Wenn Du das hinbekommst, muss ich das auch schaffen.

*g*

Nur nochmal zur Sicherheit: Sind "Mozilla" und "Netscape 7.0 Gecko" das Geiche?

Ja: Mozilla 1.0 == Netscape 7, was die Rendering-Engine betrifft.

Ich brauch wol mal Ne Pause *uff*

:-)

Viele Grüße,
Christian

[Tom]

Hello,

Die Beispiele, die ich bisher gefunden habe, helfen mit leider auch nicht weiter: http://selfhtml.teamone.de/css/eigenschaften/tabellen.htm#table_layout

Alternativ kann ich nur die Anzahl der Zeichen in der Zelle begrenzen im Generator (PHP). Das wollte ich aber nicht unbedingt, damit man den Anschnitt sehen kann.

Liebe Grüße aus http://www.braunschweig.de

Tom

[Tom]

Hello,

mit Christians Muster habe ich es nun auch geschafft.
Danke Euch beiden.

War ein gaaanz blöder Fehler in meinem Stylesheet:

table.liste
  {
    width:694px;
    table-layout:fixed;
    overflow:hidden;
    whitespace:nowrap;
  }

Da hatte ich

table .liste
  {
    width:694px;
    table-layout:fixed;
    overflow:hidden;
    whitespace:nowrap;
  }

geschrieben. und das mag der Netscape eben nicht. Wahrscheinlich der MSIE auch nicht, aber man hats ja nicht gemerkt.

Außerdem hatte ich noch klassische HTML-Attribute und CSS gemischt. Nachdem die auch alle verschwunden waren, gings dann.

Nun muss ich noch die Breitenangaben per Berechnung erstellen, damit Tabellenbreite = Felder + Border  werden und Tabellenbreite + Scrollbar-Breite = Div-Breite

Leider kann man die Breite des Scrollbars auch in Windows einstellen.

Liebe Grüße aus http://www.braunschweig.de

Tom

[MudGuard]

Hi,

{
    whitespace:nowrap;

no such property...
Meintest Du white-space?

table.liste
  table .liste
das mag der Netscape eben nicht.

Das hat mit mögen oder nicht mögen wenig zu tun.
Die beiden Selektoren wählen komplett unterschiedliche Elemente aus:
der erste ein table-Element mit Klasse liste,
der zweite ein beliebiges Element mit Klasse liste, welches sich irgendwo in irgendeiner Tabelle befindet.

cu,
Andreas

[Tom]

Hello,

{
    whitespace:nowrap;

no such property...
Meintest Du white-space?

Ja, hatte ich auch noch gefunden.

table.liste
  table .liste
das mag der Netscape eben nicht.

Das hat mit mögen oder nicht mögen wenig zu tun.
Die beiden Selektoren wählen komplett unterschiedliche Elemente aus:
der erste ein table-Element mit Klasse liste,
der zweite ein beliebiges Element mit Klasse liste, welches sich irgendwo in irgendeiner Tabelle befindet.

So war das auch gedacht. Aber die Tabelle selber gehört dann ja wohl nicht dazu? Wie kann ich denn in _einer_ Definition die Tabelle mit Klasse liste UND alle ihre Subelemente mit Klasse liste greifen?

Liebe Grüße aus http://www.braunschweig.de

Tom

[MudGuard]

Hi,

So war das auch gedacht. Aber die Tabelle selber gehört dann ja wohl nicht dazu? Wie kann ich denn in _einer_ Definition die Tabelle mit Klasse liste UND alle ihre Subelemente mit Klasse liste greifen?

Willst Du wirklich den Elementen einzeln auch noch mal die Klasse Liste zuweisen? Ist doch nicht nötig, aber wenn Du meinst:

table.liste, table.liste .liste  { /* whatever */ }

Das Komma trennt mehrere Selektoren.

cu,
Andreas

[Tom]

Hello,

So war das auch gedacht. Aber die Tabelle selber gehört dann ja wohl nicht dazu? Wie kann ich denn in _einer_ Definition die Tabelle mit Klasse liste UND alle ihre Subelemente mit Klasse liste greifen?

Willst Du wirklich den Elementen einzeln auch noch mal die Klasse Liste zuweisen? Ist doch nicht nötig, aber wenn Du meinst:

table.liste, table.liste .liste  { /* whatever */ }

Das Komma trennt mehrere Selektoren.

Danke. Ich muss mich nun endlich selber mit CSS intensiv auseinandersetzen. Die ganzen Spezialanweisungen, die es da gibt... > + * und so, @page, @media usw.

Wenn ich also jetzt schreiben würde:

table.liste     dann wären damit das Tableelement
{               mit class="liste" gemeint
  ...
}

Und wenn ich

table .liste    schreibe, dann wären alle Childs eines <table>
{               mit class="liste" erfasst, aber nicht das erste
  ..            <table>-Element aber auch eine Untertabelle?
}

Sag doch mal, dass ich das jetzt endlich richtig verstanden habe *bock*

Liebe Grüße aus http://www.braunschweig.de

Tom

[MudGuard]

Hi,

Sag doch mal, dass ich das jetzt endlich richtig verstanden habe *bock*

Würde ich ja, wenn dem so wäre.

Aber:

table.liste     dann wären damit das Tableelement
{               mit class="liste" gemeint

Nicht ganz. Es werden ALLE table-Elemente, die im class-Attribut die Klasse liste stehen haben, ausgewählt.
class darf eine Liste von Klassen enthalten, nicht nur eine Klasse. Außerdem darf eine Klasse bei mehreren Elementen verwendet werden, also nicht nur "das table-Element, das...", sondern "alle table-Elemente, die..."

table .liste    schreibe, dann wären alle Childs eines <table>
{               mit class="liste" erfasst, aber nicht das erste
  ..            <table>-Element aber auch eine Untertabelle?
}

das hier ist falsch.
Es werden innerhalb einer beliebigen Tabelle alle Elemente (Kinder, Enkel, Urenkel, ...) ausgewählt, die im class-Attribut die Klasse liste stehen haben.

cu,
Andreas

[Tom]

Hello,

table.liste     dann wären damit das Tableelement
{               mit class="liste" gemeint

Nicht ganz. Es werden ALLE table-Elemente, die im class-Attribut die Klasse liste stehen haben, ausgewählt.

Ja, das habe ich auch so gemeint. Es gibt aber nur eine Selector-Definition für table.liste, aber viele Instanzen (nodes), die den Selector nutzen.

class darf eine Liste von Klassen enthalten, nicht nur eine Klasse. Außerdem darf eine Klasse bei mehreren Elementen verwendet werden, also nicht nur "das table-Element, das...", sondern "alle table-Elemente, die..."

Genau, ich habe z.B. noch <form class="liste" ....>

table .liste    schreibe, dann wären alle Childs eines <table>
{               mit class="liste" erfasst, aber nicht das erste
  ..            <table>-Element aber auch eine Untertabelle?
}

das hier ist falsch.
Es werden innerhalb einer beliebigen Tabelle alle Elemente (Kinder, Enkel, Urenkel, ...) ausgewählt, die im class-Attribut die Klasse liste stehen haben.

Ja, das meinte ich doch. Alle Instanzen eines <table>, also alle nodes, die den Selctor <table> nutzen...

Hier scheinen nur zwei Fachsprachen aufeinander zu prallen.

Liebe Grüße aus http://www.braunschweig.de

Tom