ComputerBase Menü
Aktuelles

HTML [TD] Spaltenbreite wird nicht fixiert! Warum?

Ja, habe ich auch wollte ich mir aber sparen. Dachte das geht auch über CSS...
 
wenn du das <img> in einen absatz (<p style="text-align:center">) packst, sollte das Bild zentriert werden.
 
Gibt es eine Möglichkeit, das sich die Tabelle automatisch der Anzahl der Spalten anpasst?
PHP: 
<style type="text/css">
.facetable {
	width: 100%; <- funktioniert nicht, nur "X"px
	border-width: 0px;
	border-spacing: 1px;
	border-style: none;
	border-color: gray;
	border-collapse: collapse;
	background-color: #eeeeee;
}
 
Zuletzt bearbeitet:
Mir fällt jetzt nur eine Lösung mit JavaScript ein. Sonst wirds in meinen Augen schwer^^

Bzw. verwendest du auch PHP? Wenn ja, geht es auch damit.
 
Geht nur in HTML, da das ganz für eine E-Mail gehen soll!
 
Du kannst allerdings auch PHP dafür nutzen.

Kannst ja trotzdem 100% nutzen...

Legst einfach eine div um das ganze und kannst dann <table> auf 100% setzen.
<div><table></table></div>
So Ordnet sich <table> dem div unter.

Oder hab ich das was falsch verstanden?

100% beziehen sich immer auf das letzte worauf <table>(in Deinem Fall) trifft.
Wenn dein div oder p Tag nur 100px ist dann kann table auch nur 100px ( 100% ) erreichen!
(als Beispiel)
 
Zuletzt bearbeitet:
Tribo0n schrieb:
Geht nur in HTML, da das ganz für eine E-Mail gehen soll!
Zum Vergrößern anklicken....

volcem schrieb:
Du kannst allerdings auch PHP dafür nutzen.
Zum Vergrößern anklicken....
Geht nicht wie ich vorhin geschrieben habe ;)

volcem schrieb:
Legst einfach eine div um das ganze und kannst dann <table> auf 100% setzen....
Zum Vergrößern anklicken....
Die TD Spalten sollen alle Fixiert auf 198px sein und die Tabelle soll sich je nachdem wie viele Spalten da sind anpassen.
Ergänzung ()

Auch wenn ich eine feste Tabellenbreite einstelle, ist die <td> Breite nicht fest auf 198px eingestellt! Warum?

PHP: 
<!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: 1024px;
	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>
 
Zuletzt bearbeitet:
Ganz einfache Rechnung.......:

1024 / 9 = 133.xx (px)

9 * 198 = 1782 (px)

Fällt Dir was auf?

*edit*

Aber mal was anderes, wenn es doch für eine Email ist, wieso um Gottes Willen willst Du so eine Breite?
Ist ein wenig viel....
Ich würde im Rahmen von < 1000px bleiben, willst ja schließlich dass "alle" die die Email bekommen es auch angezeigt bekommen, oder?

*edit2*

Aber noch was, was mir so auffällt:

Eine Tabelle baut man so auf:
HTML: 
<table>
       <tr>
              <th></th>
                       <td></td>
                                       </tr>
                                                </table>
 
Zuletzt bearbeitet:
Am liebsten wäre es mir wenn die Tabelle 100% vom E-Mail Fenster des Empfängers hat.
Geht sowas, das dann die Spalten automatisch in die "nächste Zeile" springen?

PHP: 
.facetable { 
    width: 100%;
}
oder
PHP: 
.facetable { 
    width: 3000px;
}
Klappt beides nicht. Die <TD> sind einfach nicht fest!!!

Geht mein Aufbau der Tabelle nicht? Ich habe/brauche ja 3 Zeilen/Bereiche, bei deinem Aufbau sind es nur 2...

Edit 1: Selbst wenn ich z.B. die Tabelle Fest auf 3000px einstelle, sind die <td>'s nicht Fest eingestellt!

Edit 2: Ich dachte 1024Pixel hat heutzutage jeder Monitor und somit sollte die E-Mail doch jeder voll sehen? Am liebsten wäre mir jedoch wie pben geschrieben, eine automatische Anpassung, die ja im Moment nicht klappt...
Ergänzung ()

ripuli-6 schrieb:
wenn du das <img> in einen absatz (<p style="text-align:center">) packst, sollte das Bild zentriert werden.
Zum Vergrößern anklicken....

Habs jetzt mit weniger Zeichen, da es in CSS nicht klappt, mit <center></center> gelöst.
Vielleicht weiß noch jemand eine funktionierende CSS Lösung dafür...
 
Zuletzt bearbeitet:
Tribo0n schrieb:
Am liebsten wäre es mir wenn die Tabelle 100% vom E-Mail Fenster des Empfängers hat.
Geht sowas, das dann die Spalten automatisch in die "nächste Zeile" springen?
Zum Vergrößern anklicken....

Was hast du denn gegen die Lösung mit den Listenelementen? Semantisch sind die Tabellen eh Unsinn, weil es sich nicht um typischen Tabelleninhalt handelt. Bild und Bildunterschrift kannst Du semantisch als Einheit betrachten, weil es ja auch logisch zusammengehört und mehrere Elemente davon hintereinander interpretiere ich als Aufzählung und dafür ist das Element <ul> da.
Du kannst jedes Listenelement eine genaue Breite geben und was noch viel wichtiger ist, die Elemente brechen am Bildschirmrand um und laufen in der nächsten Zeile weiter, so dass immer die verfügbare Fläche ausgenutzt wird.

Warte mal, ich mache dir mal ein Mock-up fertig, das du dann anpassen kannst.
 
Habe garnichts dagegen, bekomme ich das denn mit Listenelementen optisch ähnlich/genauso hin wie meine jetzige Lösung? Das wäre mir wichtig.

Erstmal danke für die Hilfe!
 
Zuletzt bearbeitet:
So hier ist das fertige markup:
HTML: 
<!DOCTYPE html>
<html><head>
<title>Test</title>
<style type="text/css">
ul {
	margin:0;
	padding:0;
	position:relative;
	clear:both;
}
li {
	margin-left:10px;
	min-width:200px;
	max-width:200px;
	float:left;
	list-style:none;
	overflow:hidden;
}
li p {
	margin:0;
	padding:10px;
}
.bild {
	text-align:center;
	padding:0;
}
.bild img {
	border:2px solid white;
}
</style>
</head>

<body>

<ul>
	<li>
		<p class="bild">
			<a href=""><img src=".jpg" /></a>
		</p>
		<p class="datum">12.12.2010</p>
		<p class="text">Hier kommt der Untertitel rein</p>
	</li>
	<li>
		<p class="bild">
			<a href=""><img src=".jpg" /></a>
		</p>
		<p class="datum">12.12.2010</p>
		<p class="text">Hier kommt der Untertitel rein</p>
	</li>
	<li>
		<p class="bild">
			<a href=""><img src=".jpg" /></a>
		</p>
		<p class="datum">13.12.2010</p>
		<p class="text">Hier kommt der Untertitel rein</p>
	</li>
</ul>
</body></html>

Edit:
Das Aussehen kannst Du jetzt sauber nach deinen Wünschen per CSS anpassen. zB, wenn dir der Abstand des Datums zum Bild zu klein ist, kannst Du das über .datum{margin-top:2em;} ändern
 
Zuletzt bearbeitet: (Hinweis eingefügt)
Perfekt! Vielen Dank. Habe nun alles umgebaut, und das ist dabei rausgekommen:
HTML: 
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
ul {
	margin:0px;
	padding:0px;
	position:relative;
	clear:both;
}
li {
	margin:5px 0px 0px 5px;
	min-width:198px;
	max-width:198px;
	float:left;
	list-style:none;
	overflow:hidden;
	border:1px solid gray;
	background-color:#ffffff;
}
.datumbildnummer {	
	margin:0px;
	padding:3px;
	font-family:Arial;
	font-weight:Bold;
	font-size:7.5pt;
	text-align:left;
	background-color:#eeeeee;
}
.bild {
	text-align:center;
	padding:3px;	
	margin:0px;
	height:192px;
}
.bild img {
	border:0px;
}
.logobig {
	margin:-10px 0px 0px 0px;
	font-family: Impact;
	font-size:54pt;
	color:#c0c0c0;
	padding:0px;
	text-align:right;
 
}
.logosmall {
	margin:-15px 0px 0px 0px;
	font-family:Impact;
	font-size:16pt;
	color:#c0c0c0;
	padding:0px;
	text-align:right;
}
.headline {
	margin:-7px 0px 0px 5px;
	font-family: Arial;
	font-size:18pt;
	color: #ff0000;
	padding:0px;
}
.text {	
	border-top:1px solid gray;
	margin:0px;
	padding:3px;
	background-color:#eeeeee;
	font-family: Arial;
	font-size:10pt;
}
.text2 {
	margin-left: 5px;
	font-family:Arial;
	font-size:8pt;
	color: #0000ff;
}
.text3 {
	margin-left: 5px;
	font-family:Arial;
	font-size:8pt;
	color: #808080;
}
.text4 {
	margin-left: 5px;
	font-family: Arial;
	font-size: 10pt;
}
</style>
</head>
<BODY bgColor=#f8f8f8>
<p class="logobig">XXXXX</p>
<p class="logosmall">XXXXX</p>
<p class="text4">XXXXX<p>
<p class="headline">XXXXX</p>
<ul>
	<li>
		<p class="bild">
			<a href="C:\Fotos\02820404.jpg"><img src="thumb_02820404.jpg" /></a>
		</p>
		<p class="text">XXXXX</p>
		<p class="datumbildnummer">Datum: 03.03.2011<br>Bildnummer: 02820404</p>
	</li>
	<li>
		<p class="bild">
			<a href="C:\Fotos\02820405.jpg"><img src="thumb_02820405.jpg" /></a>
		</p>
		<p class="text">XXXXX</p>
		<p class="datumbildnummer">Datum: 03.03.2011<br>Bildnummer: 02820405</p>
	</li>
	<li>
		<p class="bild">
			<a href="C:\Fotos\02820404.jpg"><img src="thumb_02820406.jpg" /></a>
		</p>
		<p class="text">XXXXX</p>
		<p class="datumbildnummer">Datum: 03.03.2011<br>Bildnummer: 02820406</p>
	</li>
	<li>
		<p class="bild">
			<a href="C:\Fotos\02820405.jpg"><img src="thumb_02820407.jpg" /></a>
		</p>
		<p class="text">XXXXX</p>
		<p class="datumbildnummer">Datum: 03.03.2011<br>Bildnummer: 02820407</p>
	</li>
	<li>
		<p class="bild">
			<a href="C:\Fotos\02820404.jpg"><img src="thumb_02820408.jpg" /></a>
		</p>
		<p class="text">XXXXX</p>
		<p class="datumbildnummer">Datum: 03.03.2011<br>Bildnummer: 02820408</p>
	</li>
	<li>
		<p class="bild">
			<a href="C:\Fotos\02820405.jpg"><img src="thumb_02820409.jpg" /></a>
		</p>
		<p class="text">XXXXX</p>
		<p class="datumbildnummer">Datum: 03.03.2011<br>Bildnummer: 02820409</p>
	</li>
	<li>
		<p class="bild">
			<a href="C:\Fotos\02820404.jpg"><img src="thumb_02820410.jpg" /></a>
		</p>
		<p class="text">XXXXX</p>
		<p class="datumbildnummer">Datum: 03.03.2011<br>Bildnummer: 02820410</p>
	</li>
	<li>
		<p class="bild">
			<a href="C:\Fotos\02820405.jpg"><img src="thumb_02820411.jpg" /></a>
		</p>
		<p class="text">XXXXX</p>
		<p class="datumbildnummer">Datum: 03.03.2011<br>Bildnummer: 02820411</p>
	</li>
	<li>
		<p class="bild">
			<a href="C:\Fotos\02820405.jpg"><img src="thumb_02820412.jpg" /></a>
		</p>
		<p class="text">XXXXX</p>
		<p class="datumbildnummer">Datum: 03.03.2011<br>Bildnummer: 02820412</p>
	</li>
</ul>
<br style="clear:both;">
	<p class="text4">
		XXXXXBR><BR>
		XXXXX<BR><BR>
		XXXXX<BR><BR>
	</p>
	<p class="text2">
		XXXXX</p>
	<p class="text3">
		XXXXX</p>
	<FONT color=#008000 size=4>&nbsp<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>
</body>
</html>
Wie bekomme ich es hin das ein hoover Effekt (Graue Umrandung soll durch Rote Umrandung ersetzt werden) über den Rahmen von <li> geht? Hab gegooglt, aber nix hat funktioniert...
Wie bekomme ich die Bilder "Mittig" ausgerichtet? Es sind ja mal Hoch- und mal Querformat Bilder dabei. Deswegen bringt padding/margin ja nix! Valign/align=middle/center etc. alles versucht, nix hat geklappt.
 
Zuletzt bearbeitet:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Ähnliche Themen

W
CSS: Formatierungsprobleme mit einer Tabelle
Antworten
9
Aufrufe
733
Nixdorf
Nixdorf
N
Bilder wird oben an der Suchleiste abgeschnitten (HTML/CSS)
Antworten
3
Aufrufe
951
Janush
Janush
N
Dark/light mode funktioniert nicht ganz
Antworten
3
Aufrufe
1.198
abcddcba
A
J
Shopware 5 Accordion funktioniert nicht
Antworten
4
Aufrufe
882
ColdGlow
ColdGlow
N
(HTML) Bild verschwindet hinter live Hintergrund
Antworten
2
Aufrufe
768
funkmasterflow
funkmasterflow
Zurück
Oben

Willkommen auf ComputerBase!

Mit Werbung weiterlesen

Besuche ComputerBase wie gewohnt mit Werbung und Tracking. Die Zustimmung ist jederzeit widerrufbar.

Details im Privacy Center und in der Liste unserer Partner. Ein Widerruf ist möglich in der Datenschutzerklärung.

… oder ComputerBase Pro bestellen

Nutze ComputerBase ohne Werbebanner, Video-Ads und Werbetracking schon für 4 €/Monat oder 36 €/Jahr.

Mehr zu ComputerBase Pro

Bereits Pro-Nutzer? Hier anmelden.

Tracking: Wir und unsere 165 Partner verarbeiten personenbezogene Daten, indem wir mit auf Ihrem Gerät gespeicherten Informationen (z. B. eindeutige Kennungen in Cookies) ein Nutzungsprofil erstellen, um z. B. Anzeigen zu personalisieren. Verarbeitungszwecke: Genaue Standortdaten und Abfrage von Geräteeigenschaften zur Identifikation, Informationen auf einem Gerät speichern und/oder abrufen, Personalisierte Anzeigen und Inhalte, Anzeigen- und Inhaltsmessungen, Erkenntnisse über Zielgruppen und Produktentwicklungen.

Impressum Kontakt Datenschutz