Frage stellen

[TD] Spaltenbreite wird nicht fixiert! Warum?

2.5k Aufrufe
Gefragt in Webseiten HTML von snakebite334 Einsteiger_in (89 Punkte)
Habe folgendes Problem:
Warum setzt er die Spalten nicht FEST auf 500 Pixel? Was mache ich falsch?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD>
<META content="text/html; charset=iso-8859-1" http-equiv=Content-Type>
<style type="text/css">
table.face {
border-width: 0px;
border-spacing: 1px;
border-style: none;
border-color: gray;
border-collapse: collapse;
background-color: #eeeeee;
}
td.face {
width: 500px;
border-width: 1px;
padding: 3px;
border-bottom-style: none;
border-left-style: inset;
border-right-style: inset;
border-top-style: inset;
border-color: gray;
background-color: #ffffff;
}
td.face2 {
border-width: 1px;
padding: 3px;
border-bottom-style: none;
border-left-style: inset;
border-right-style: inset;
border-top-style: inset;
border-color: gray;
background-color: #eeeeee;
font-family: Arial;
font-size: 12;
}
th.face {
border-width: 1px;
padding: 3px;
border-bottom-style: inset;
border-left-style: inset;
border-right-style: inset;
border-top-style: none;
border-color: gray;
background-color: #eeeeee;
font-family: Arial;
font-size: 10;
text-align: left;
}
font.logobig {
font-family: Impact;
font-size: 54pt;
color: #c0c0c0;
}
font.logosmall {
line-height: 0.1em;
font-family: Impact;
font-size: 16pt;
color: #c0c0c0;
}
font.headline {
font-family: Arial;
font-size: 18pt;
color: #ff0000;
}
img.face {
border-width: 0px;
border-spacing: 1px;
border-style: none;
border-color: gray;
border-collapse: collapse;
}
</style>
</HEAD>
<BODY bgColor=#f8f8f8>
<DIV align="right"><FONT class="logobig">XXXXX<BR></FONT>
<FONT class="logosmall">XXXXX</FONT></DIV>
<FONT face=Arial size=1><BR><BR></FONT>
<FONT face=Arial size=2>XXXXX
<FONT face=Arial size=1><BR><BR></FONT>
XXXXX</FONT>
<FONT face=Arial size=1><BR><BR></FONT>
<FONT class="headline">XXXXX</FONT>
<FONT face=Arial size=1><BR><BR></FONT>
<TABLE class="face">
<tr>
<td class="face"><center><A href="02820404.jpg"><IMG class="face" src="C:\Fotos\thumb_02820404.jpg"></center></A></td>
<td class="face"><center><A href="02820405.jpg"><IMG class="face" src="C:\Fotos\thumb_02820405.jpg"></center></A></td>
<td class="face"><center><A href="02820406.jpg"><IMG class="face" src="C:\Fotos\thumb_02820406.jpg"></center></A></td>
<td class="face"><center><A href="02820407.jpg"><IMG class="face" src="C:\Fotos\thumb_02820407.jpg"></center></A></td>
<td class="face"><center><A href="02820408.jpg"><IMG class="face" src="C:\Fotos\thumb_02820408.jpg"></center></A></td>
<td class="face"><center><A href="02820409.jpg"><IMG class="face" src="C:\Fotos\thumb_02820409.jpg"></center></A></td>
<td class="face"><center><A href="02820410.jpg"><IMG class="face" src="C:\Fotos\thumb_02820410.jpg"></center></A></td>
<td class="face"><center><A href="02820411.jpg"><IMG class="face" src="C:\Fotos\thumb_02820411.jpg"></center></A></td>
<td class="face"><center><A href="02820412.jpg"><IMG class="face" src="C:\Fotos\thumb_02820412.jpg"></center></A></td>
</tr>
<tr>
<td class="face2">XXXXX</td>
<td class="face2">XXXXX</td>
<td class="face2">XXXXX</td>
<td class="face2">XXXXX</td>
<td class="face2">XXXXX</td>
<td class="face2">XXXXX</td>
<td class="face2">XXXXX</td>
<td class="face2">XXXXX</td>
<td class="face2">XXXXX</td>
<tr>
<th class="face"><br>Datum: 03.03.2011<br>Bildnummer: 02820404</th>
<th class="face"><br>Datum: 03.03.2011<br>Bildnummer: 02820405</th>
<th class="face"><br>Datum: 03.03.2011<br>Bildnummer: 02820406</th>
<th class="face"><br>Datum: 03.03.2011<br>Bildnummer: 02820407</th>
<th class="face"><br>Datum: 03.03.2011<br>Bildnummer: 02820408</th>
<th class="face"><br>Datum: 03.03.2011<br>Bildnummer: 02820409</th>
<th class="face"><br>Datum: 03.03.2011<br>Bildnummer: 02820410</th>
<th class="face"><br>Datum: 03.03.2011<br>Bildnummer: 02820411</th>
<th class="face"><br>Datum: 03.03.2011<br>Bildnummer: 02820404</th>
</tr>
</table>
<BR>
<FONT size=2 face=Arial>XXXXX<BR><BR></FONT>
<FONT size=2 face=Arial>XXXXX<BR><BR></FONT>
<FONT size=2 face=Arial>XXXXX <i>XXXXX</i> XXXXX<BR><BR></FONT>
<FONT style="FONT-SIZE: 8pt" size=1 color=#0000ff face=Arial>XXXXX<BR>XXXXX<BR>XXXXX<BR>
<A href="mailto:XXXXX">
<U>XXXXX</U></A><BR>
<A href="http://www.XXXXX.de"><U>www.XXXXX.de</U></A><BR>
XXXXX<BR>XXXXX<BR><BR>
XXXXX<BR><BR></FONT>
<FONT style="FONT-SIZE: 8pt" face=Arial size=1 color=#808080>XXXXX<BR><BR>
XXXXX<BR><BR></FONT>
<FONT color=#008000 size=4><SPAN lang=en-GB><SPAN
style="FONT-FAMILY: Webdings; COLOR: green; FONT-SIZE: 14pt; mso-fareast-font-family: 'Times New Roman'; mso-fareast-theme-font: minor-fareast; mso-bidi-font-family: Arial; mso-ansi-language: EN-GB; mso-fareast-language: DE; mso-bidi-language: AR-SA; mso-no-proof: yes"
lang=EN-GB>P</SPAN></FONT>
<FONT style="FONT-SIZE: 8pt" face=Arial color=#008000 size=1> Please consider the environment before printing this email.</FONT>
</TABLE>
</BODY>
</HTML>

7 Antworten

0 Punkte
Beantwortet von
Hi, du musst die Breite in allen td-Tags und auch eine gesamte Tabellenbreite angeben.
0 Punkte
Beantwortet von kicia Mitglied (939 Punkte)
Wenn
- die Tabelle größer ist, als das Elternelement und
- der Inhalt eigentlich weniger Platz braucht
dann nehmen sich die Browser heraus, die Tabelle solange zu verkleinern, bis der Inhalt gerade noch hinein passt.
Finde ich meistens sehr sinnvoll, aber ich gebe Dir Recht, daß "width:500px" eigentlich eine klare Anweisung ist.
Könnt man drüber diskutieren.

Lösung jedenfalls:
a. wie Solo sagt, feste Breite der Tabelle oder
b. dem Inhalt der Zellen eine Breite geben.

In Deiner Datei würde zB. abhilfe schaffen:
center { width:500px; }
(Und dann kannst Du das "width" des TD im Prinzip weglassen)

Wobei ich statt CENTER lieber DIV nehmen würde, bzw. ganz weglassen und stattdessen das A mit css formatieren.
Außerdem ist Deine Verschachtelung von CENTER und A fehlerhaft.

Kleiner Tip desweiteren:
du könntest die ganzen class in den td sparen und stattdessen ins tr schreiben,
im css müsstest du dann nicht "td.face" schreiben, sondern "tr.face td"
0 Punkte
Beantwortet von snakebite334 Einsteiger_in (89 Punkte)
Überarbeitete Version ist jetzt:

Egal ob ich in der <table> die Breite von z.B. 3000px oder 100% angebe, die <TD> wird bleibt nicht fest! Warum nicht?
Am liebsten wäre es mir wenn die Tabelle 100% vom Fenster hat.
Geht sowas, das dann die Spalten automatisch in die "nächste Zeile" springen?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<META content="text/html; charset=iso-8859-1" http-equiv=Content-Type>
<style type="text/css">
.facetable {
width: 3000px;
border-width: 0px;
border-spacing: 1px;
border-style: none;
border-color: gray;
border-collapse: collapse;
background-color: #eeeeee;
}
.facetd {
width: 198px;
border-width: 1px;
padding: 3px;
border-bottom-style: none;
border-left-style: inset;
border-right-style: inset;
border-top-style: inset;
border-color: gray;
background-color: #ffffff;
}
.facetd2 {
width: 198px;
border-width: 1px;
padding: 3px;
border-bottom-style: none;
border-left-style: inset;
border-right-style: inset;
border-top-style: inset;
border-color: gray;
background-color: #eeeeee;
font-family: Arial;
font-size: 12;
}
.faceth {
width: 198px;
border-width: 1px;
padding: 3px;
border-bottom-style: inset;
border-left-style: inset;
border-right-style: inset;
border-top-style: none;
border-color: gray;
background-color: #eeeeee;
font-family: Arial;
font-size: 10;
text-align: left;
}
.logobig {
font-family: Impact;
font-size: 54pt;
color: #c0c0c0;
margin: 0px;
padding: 0px;
text-align: right;

}
.logosmall {
line-height: 0.1em;
font-family: Impact;
font-size: 16pt;
color: #c0c0c0;
margin: 0px;
padding: 0px;
text-align: right;
}
.headline {
font-family: Arial;
font-size: 18pt;
color: #ff0000;
margin: 0px;
padding: 0px;
}
.text {
font-family: Arial;
font-size: 12;
}

.text2 {
font-family: Arial;
font-size: 11;
color: #0000ff;
}

.text3 {
font-family: Arial;
font-size: 11;
color: #808080;
}
.faceimg {
border-width: 0px;
border-spacing: 1px;
border-style: none;
border-color: gray;
border-collapse: collapse;
}
</style>
</HEAD>
<BODY bgColor=#f8f8f8>
<p class="logobig">XXXX</p>
<p class="logosmall">XXXX</p>
<p class="text">XXXX</p>
<p class="headline">XXXX</p><BR>
<TABLE class="facetable">
<tr>
<td class="facetd" href="02820405.jpg"><IMG class="faceimg" src="C:\Fotos\thumb_02820404.jpg"></A></td>
<td class="facetd" href="02820405.jpg"><center><IMG class="faceimg" src="C:\Fotos\thumb_02820405.jpg"></center></A></td>
<td class="facetd" href="02820406.jpg"><center><IMG class="faceimg" src="C:\Fotos\thumb_02820406.jpg"></center></A></td>
<td class="facetd" href="02820407.jpg"><center><IMG class="faceimg" src="C:\Fotos\thumb_02820407.jpg"></center></A></td>
<td class="facetd" href="02820408.jpg"><center><IMG class="faceimg" src="C:\Fotos\thumb_02820408.jpg"></center></A></td>
<td class="facetd" href="02820409.jpg"><center><IMG class="faceimg" src="C:\Fotos\thumb_02820409.jpg"></center></A></td>
<td class="facetd" href="02820410.jpg"><center><IMG class="faceimg" src="C:\Fotos\thumb_02820410.jpg"></center></A></td>
<td class="facetd" href="02820411.jpg"><center><IMG class="faceimg" src="C:\Fotos\thumb_02820411.jpg"></center></A></td>
<td class="facetd" href="02820412.jpg"><center><IMG class="faceimg" src="C:\Fotos\thumb_02820412.jpg"></center></A></td>
</tr>
<tr>
<td class="facetd2">XXXX</td>
<td class="facetd2">XXXX</td>
<td class="facetd2">XXXX</td>
<td class="facetd2">XXXX</td>
<td class="facetd2">XXXX</td>
<td class="facetd2">XXXX</td>
<td class="facetd2">XXXX</td>
<td class="facetd2">XXXX</td>
<td class="facetd2">XXXX</td>
<tr>
<th class="faceth"><br>Datum: 03.03.2011<br>Bildnummer: 02820404</th>
<th class="faceth"><br>Datum: 03.03.2011<br>Bildnummer: 02820405</th>
<th class="faceth"><br>Datum: 03.03.2011<br>Bildnummer: 02820406</th>
<th class="faceth"><br>Datum: 03.03.2011<br>Bildnummer: 02820407</th>
<th class="faceth"><br>Datum: 03.03.2011<br>Bildnummer: 02820408</th>
<th class="faceth"><br>Datum: 03.03.2011<br>Bildnummer: 02820409</th>
<th class="faceth"><br>Datum: 03.03.2011<br>Bildnummer: 02820410</th>
<th class="faceth"><br>Datum: 03.03.2011<br>Bildnummer: 02820411</th>
<th class="faceth"><br>Datum: 03.03.2011<br>Bildnummer: 02820404</th>
</tr>
</table>
<BR>
<p class="text">XXXX</p>
<p class="text3">XXXX</p>
<FONT color=#008000 size=4><SPAN lang=en-GB><SPAN
style="FONT-FAMILY: Webdings; COLOR: green; FONT-SIZE: 14pt; mso-fareast-font-family: 'Times New Roman'; mso-fareast-theme-font: minor-fareast; mso-bidi-font-family: Arial; mso-ansi-language: EN-GB; mso-fareast-language: DE; mso-bidi-language: AR-SA; mso-no-proof: yes"
lang=EN-GB>P</SPAN></FONT>
<FONT style="FONT-SIZE: 8pt" face=Arial color=#008000 size=1> Please consider the environment before printing this email.</FONT>
</TABLE>
</BODY>
</HTML>
0 Punkte
Beantwortet von snakebite334 Einsteiger_in (89 Punkte)
P.S.
Das verstehe ich nicht:

In Deiner Datei würde zB. abhilfe schaffen:
center { width:500px; }
(Und dann kannst Du das "width" des TD im Prinzip weglassen)


Wohin damit?
0 Punkte
Beantwortet von snakebite334 Einsteiger_in (89 Punkte)
An welcher Stelle? Und was stimmt da nicht?
Wobei ich statt CENTER lieber DIV nehmen würde, bzw. ganz weglassen und stattdessen das A mit css formatieren.
Außerdem ist Deine Verschachtelung von CENTER und A fehlerhaft.
0 Punkte
Beantwortet von kicia Mitglied (939 Punkte)
Egal ob ich in der <table> die Breite von z.B. 3000px oder 100% angebe, die <TD> wird bleibt nicht fest! Warum nicht?

Ich habe Deinen Code ausprobiert, und sowohl Tabelle als auch Zellen behalten immer die selbe Größe.
Ich kann den Fehler also nicht sehen.

Am liebsten wäre es mir wenn die Tabelle 100% vom Fenster hat.

"100% vom Fenster" (dessen Breite ja veränderbar ist) und "feste Breite" schliesst sich gegenseitig aus.
Das ist also in diesem Universum nicht möglich.

Geht sowas, das dann die Spalten automatisch in die "nächste Zeile" springen?

Tabelle ganz weglassen, stattdessen für jede Box ein DIV mit "float:left;".
(nach allen Boxen ein "clear:both;")
zB.:

<HTML><HEAD>
<style type="text/css">
.box { float:left; width:100px; height:100px; border:solid 1px; }
</style>
<body>
<div class="box">inhalt</div>
<div class="box">inhalt</div>
<div class="box">inhalt</div>
<div style="clear:both;"></div>
</BODY></HTML>

siehe de.selfhtml.org - float
und de.selfhtml.org - clear

Wohin damit? An welcher Stelle? Und was stimmt da nicht?

das erübrigt sich zwar, wenn Du floats verwendest, aber:
- In die CSS definitionen (zwischen den style-tags)
- an der einzigen Stelle, wo Du CENTER verwendet hast
- siehe de.selfhtml.org - Verschachtelung von Elementen
0 Punkte
Beantwortet von
mit
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
erlaubst du dem Browser, dein CSS zu interpretieren, wie es ihm beliebt.
Bitte vervollständige diese Zeile.

Dass dein Code nicht valide (fehlerfrei) ist wurde schon erwähnt. Unter validator.w3.org/ kannst du das prüfen lassen.

Du verwendest HTML aus der Mottenkiste, <font> und <center>, das längst (seit ca. 10 Jahren) durch entsprechendes CSS ersetzt wurde
und nicht mehr verwendet werden soll.

All dies kann schon für Darstellungsfehler verantwortlich sein.

Mit dem Konzept der Selektoren in CSS hast du auch noch keine Erfahrung, deine vielen Klassen sind nämlich weitgehend überflüssig.

Dein Problem ist aber auch, dass du der Tabelle keine Breite gibst, und diese Angabe uU vom Browser höher gewertet wird als die
Breite der untergeordneten td.

Auf SelfHTML/CSS/Tabellenlayout findest du Beispiele,
wie du das Problem angehen kannst.
...