nicht angemeldet
tabellenspale mit CSS formatieren
0 0 
Gunnar Bittersmann
0 0 Gunnar Bittersmann
0
tabellenspale mit CSS formatieren
Hallo,
ich habe mich gerade durch die Doku gekämpft, aber ich finde keine Möglichkeit, z.B die Breite von Tabellenspalten per CSS zu definieren (ohne eine eigene Klasse für jedes <td>-Element)
Mit Angabe einer Klasse geht es so
table td.spalte_drei
{ width:300px;
}
aber wie referenziere ichim CSS die n-te Spalte
habt Ihr nen Tip für mich?
Runa
-
Hi,
aber wie referenziere ichim CSS die n-te Spalte
mit :nth-child(). Ist leider CSS/3.0 und erfreut sich eines erheblichen Mangels an Verbreitung seitens der User-Agents. Workaround: + in Verbindung mit :first-child.
Cheatah
--
X-Self-Code: sh:( fo:} ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
X-Will-Answer-Email: No
X-Please-Search-Archive-First: Absolutely Yes-
Als Workaround, der in allen Browsern funktioniert, würde ich jedem Tabellenelement eine entsprechende Klasse übergeben, bspw.
<table>
<tr class="row1">
<td class="col1">1|1</td>
<td class="col2">1|2</td>
<td class="col3">1|3</td>
</tr>
<tr class="row2">
<td class="col1">2|1</td>
<td class="col2">2|2</td>
<td class="col3">2|3</td>
</tr>
<tr class="row3">
<td class="col1">3|1</td>
<td class="col2">3|2</td>
<td class="col3">3|3</td>
</tr>
</table>Gruß, LX
-
Als Workaround, der in allen Browsern funktioniert, würde ich jedem Tabellenelement eine entsprechende Klasse übergeben, bspw.
[...]
die klassen lassen sich entweder serverseitig bei der ausgabe der tabelle einfügen oder nachträglich mit javascript
-
Als Workaround, der in allen Browsern funktioniert, würde ich jedem Tabellenelement eine entsprechende Klasse übergeben, bspw.
Danke, so habe ich es jetzt umgesetzt.
-
Hi,
Als Workaround, der in allen Browsern funktioniert, würde ich jedem Tabellenelement eine entsprechende Klasse übergeben, bspw.
Danke, so habe ich es jetzt umgesetzt.komisch, so hattest Du es doch selbst ursprünglich vorgeschlagen?
Cheatah
--
X-Self-Code: sh:( fo:} ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
X-Will-Answer-Email: No
X-Please-Search-Archive-First: Absolutely Yes-
Danke, so habe ich es jetzt umgesetzt.
komisch, so hattest Du es doch selbst ursprünglich vorgeschlagen?stimmt, aber wollte mich trotzdem bedanken und ne einfachere Lösung wr janicht dabei :-)
-
@@runa:
und ne einfachere Lösung wr janicht dabei :-)
Hä?? Natürlich war eine einfache dabei.
Live long and prosper,
Gunnar--
“New Jersey Hall of Fame? […] But then I ran through the list of names: Albert Einstein, Bruce Springsteen... my mother's going to like that. […] it's the only time she's going to hear those two names mentioned in the same sentence, so I'm going to enjoy it.” (Bruce Springsteen when inducted into the New Jersey Hall of Fame, 2008-05-04) -
Hi,
stimmt, aber wollte mich trotzdem bedanken und ne einfachere Lösung wr janicht dabei :-)
? Das einzige schwierige an der genannten Lösung ist IMHO, daß man die Stile doppelt schreiben muß, da der IE hier (wg. der Totalverweigerung von :first-child) leider keinen Gruppenselektor erlaubt.
<html> <head> <title>CSS: 3. Tabellenspalte adressieren</title> <style type="text/css"><!-- [code lang=css]#test { width:90%; } /* IE kann Spalte via COL adressieren, der Rest über :first-child */ #test .col3 { background-color: #FF0000; } #test td:first-child+td+td { background-color: #FF0000; } ~~~--></style> </head> <body> <table id="test" border="1" align="center"><colgroup> <col> <col> <col class="col3"> <col> </colgroup><tr> <td>1a</td> <td>2a</td> <td>3a</td> <td>4a</td> </tr><tr> <td>1b</td> <td>2b</td> <td>3b</td> <td>4b</td> </tr><tr> <td>1c</td> <td>2c</td> <td>3c</td> <td>4c</td> </tr></table> </body> </html> [/code] Gruß, Cybaer -- Man muß viel gelernt haben, um über das, was man nicht weiß, fragen zu können. (Jean-Jacques Rousseau, Philosoph u. Schriftsteller)
-
-
-
-
-
-
@@runa:
ich habe mich gerade durch die Doku gekämpft
?? SELFHTML kannst du nicht meinen.
aber ich finde keine Möglichkeit, z.B die Breite von Tabellenspalten per CSS zu definieren (ohne eine eigene Klasse für jedes <td>-Element)
Du bauchst die 'td' auch gar nicht stylen, sondern Spalten vordefinieren.
Live long and prosper,
Gunnar--
“New Jersey Hall of Fame? […] But then I ran through the list of names: Albert Einstein, Bruce Springsteen... my mother's going to like that. […] it's the only time she's going to hear those two names mentioned in the same sentence, so I'm going to enjoy it.” (Bruce Springsteen when inducted into the New Jersey Hall of Fame, 2008-05-04)-
Mahlzeit,
Du bauchst die 'td' auch gar nicht stylen, sondern Spalten vordefinieren.
... und diese Spalten kann man dann mittels CSS formatieren. Ich habe allerdings die Erfahrung gemacht, dass das nicht in allen Browser funktioniert. Komischerweise hatte - als ich damit mal herumexperimentiert habe - der Firefox einige Probleme mit der Formatierung von in den Spalten enthaltenem Text ... im Gegensatz zum IE. Hintergründe kriegen beide hin. Beispiel gefällig?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Spaltenformatierung</title> <style type="text/css"> [code lang=css].foobar { background-color: #f00; font-weight: bold; }</style>
</head><body>
<table border="1">
<colgroup>
<col style="background-color: #ccc; font-style: italic;">
<col>
<col class="foobar">
</colgroup><tr>
<td>1. Zeile, 1. Spalte</td>
<td>1. Zeile, 2. Spalte</td>
<td>1. Zeile, 3. Spalte</td>
</tr><tr>
<td>2. Zeile, 1. Spalte</td>
<td>2. Zeile, 2. Spalte</td>
<td>2. Zeile, 3. Spalte</td>
</tr>
</table></body>
</html>[/code]
MfG,
EKKi--
sh:( fo:| ch:? rl:( br:> n4:~ ie:% mo:} va:) de:] zu:) fl:{ ss:) ls:& js:|-
@@EKKi:
der Firefox einige Probleme mit der Formatierung von in den Spalten enthaltenem Text
In den Spalten ist kein Text enthalten. Der Text steht in den 'td'-/'th'-Elementen, welche keine Nachkommen der 'col'-Elemente sind.
Demzufolge ist das Verhalten des Firefox durchaus verständlich; auch wenn man sich ein anderes wünschen würde.
Live long and prosper,
Gunnar--
“New Jersey Hall of Fame? […] But then I ran through the list of names: Albert Einstein, Bruce Springsteen... my mother's going to like that. […] it's the only time she's going to hear those two names mentioned in the same sentence, so I'm going to enjoy it.” (Bruce Springsteen when inducted into the New Jersey Hall of Fame, 2008-05-04)-
Mahlzeit,
In den Spalten ist kein Text enthalten. Der Text steht in den 'td'-/'th'-Elementen, welche keine Nachkommen der 'col'-Elemente sind.
Narf, hast ja recht ... :-)
Demzufolge ist das Verhalten des Firefox durchaus verständlich; auch wenn man sich ein anderes wünschen würde.
Stimmt. Beides. Kennst Du denn (oder auch irgendein anderer Leser) eine Möglichkeit, für bestimmte Spalten bestimmte Text- oder sonstige Formatierungen browser-übergreifend festzulegen (und möglichst ohne CSS3 *g*)?
MfG,
EKKi--
sh:( fo:| ch:? rl:( br:> n4:~ ie:% mo:} va:) de:] zu:) fl:{ ss:) ls:& js:|-
@@EKKi:
Stimmt. Beides. Kennst Du denn (oder auch irgendein anderer Leser) eine Möglichkeit, für bestimmte Spalten bestimmte Text- oder sonstige Formatierungen browser-übergreifend festzulegen (und möglichst ohne CSS3 *g*)?
http://forum.de.selfhtml.org/archiv/2007/4/t151285/#m983843. Für IE eben das entsprechende 'col'-Element stylen.
Live long and prosper,
Gunnar--
“New Jersey Hall of Fame? […] But then I ran through the list of names: Albert Einstein, Bruce Springsteen... my mother's going to like that. […] it's the only time she's going to hear those two names mentioned in the same sentence, so I'm going to enjoy it.” (Bruce Springsteen when inducted into the New Jersey Hall of Fame, 2008-05-04)-
Mahlzeit,
http://forum.de.selfhtml.org/archiv/2007/4/t151285/#m983843. Für IE eben das entsprechende 'col'-Element stylen.
OK, sind's also doch zwei Wege, die nach Rom führen ... naja ... hilft halt nichts ... danke! :-)
MfG,
EKKi--
sh:( fo:| ch:? rl:( br:> n4:~ ie:% mo:} va:) de:] zu:) fl:{ ss:) ls:& js:|
-
-
Stimmt. Beides. Kennst Du denn (oder auch irgendein anderer Leser) eine Möglichkeit, für bestimmte Spalten bestimmte Text- oder sonstige Formatierungen browser-übergreifend festzulegen (und möglichst ohne CSS3 *g*)?
wurde ja schon genannt - schreibe klassen in deine tabelle :D
-
Mahlzeit,
wurde ja schon genannt - schreibe klassen in deine tabelle :D
Komiker! ;-P
MfG,
EKKi--
sh:( fo:| ch:? rl:( br:> n4:~ ie:% mo:} va:) de:] zu:) fl:{ ss:) ls:& js:|
-
-
-
-
-