Teil von SELFHTML Forum Teil von SELFHTML Forumsarchiv Teil von 2008 Teil von Mai

SELFHTML Forumsarchiv
tabellenspale mit CSS formatieren
Informationsseite
  1. Seite (CSS) tabellenspale mit CSS formatieren von runa, 16. 05. 2008, 13:22
nach unten

tabellenspale mit CSS formatieren

Die folgende Nachricht zum Thema stammt von: runa, 16. 05. 2008, 13:22

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

nach obennach unten

tabellenspale mit CSS formatieren

Die folgende Nachricht zum Thema stammt von: Cheatah, 16. 05. 2008, 13:24

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

nach obennach unten

tabellenspale mit CSS formatieren

Die folgende Nachricht zum Thema stammt von: LX, 16. 05. 2008, 13:31

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

nach obennach unten

tabellenspale mit CSS formatieren

Die folgende Nachricht zum Thema stammt von: suit, 16. 05. 2008, 13:38

»» 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

nach obennach unten

tabellenspale mit CSS formatieren

Die folgende Nachricht zum Thema stammt von: runa, 16. 05. 2008, 14:44

»» Als Workaround, der in allen Browsern funktioniert, würde ich jedem Tabellenelement eine entsprechende Klasse übergeben, bspw.
»»
Danke, so habe ich es jetzt umgesetzt.

nach obennach unten

tabellenspale mit CSS formatieren

Die folgende Nachricht zum Thema stammt von: Cheatah, 16. 05. 2008, 15:00

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

nach obennach unten

tabellenspale mit CSS formatieren

Die folgende Nachricht zum Thema stammt von: runa, 16. 05. 2008, 15:50

»» »» 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 :-)

nach obennach unten

tabellenspale mit CSS formatieren

Die folgende Nachricht zum Thema stammt von: Gunnar Bittersmann, 16. 05. 2008, 15:52

@@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)

nach obennach unten

tabellenspale mit CSS formatieren

Die folgende Nachricht zum Thema stammt von: Cybaer, 17. 05. 2008, 12:08

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"><!--
#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>


Gruß, Cybaer

--
Man muß viel gelernt haben, um über das, was man nicht weiß, fragen zu können.
(Jean-Jacques Rousseau, Philosoph u. Schriftsteller)

nach obennach unten

tabellenspale mit CSS formatieren

Die folgende Nachricht zum Thema stammt von: Gunnar Bittersmann, 16. 05. 2008, 14:02

@@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)

nach obennach unten

tabellenspale mit CSS formatieren

Die folgende Nachricht zum Thema stammt von: EKKi, 16. 05. 2008, 15:35

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">

.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>


MfG,
EKKi

--
sh:( fo:| ch:? rl:( br:> n4:~ ie:% mo:} va:) de:] zu:) fl:{ ss:) ls:& js:|

nach obennach unten

tabellenspale mit CSS formatieren

Die folgende Nachricht zum Thema stammt von: Gunnar Bittersmann, 16. 05. 2008, 15:55

@@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)

nach obennach unten

tabellenspale mit CSS formatieren

Die folgende Nachricht zum Thema stammt von: EKKi, 16. 05. 2008, 16:10

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:|

nach obennach unten

tabellenspale mit CSS formatieren

Die folgende Nachricht zum Thema stammt von: Gunnar Bittersmann, 16. 05. 2008, 16:34

@@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)

nach obennach unten

tabellenspale mit CSS formatieren

Die folgende Nachricht zum Thema stammt von: EKKi, 16. 05. 2008, 16:37

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:|

nach obennach unten

tabellenspale mit CSS formatieren

Die folgende Nachricht zum Thema stammt von: suit, 16. 05. 2008, 16:34

»» 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

nach obennach unten

tabellenspale mit CSS formatieren

Die folgende Nachricht zum Thema stammt von: EKKi, 16. 05. 2008, 16:36

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:|

nach oben
Teil von SELFHTML Forum Teil von SELFHTML Forumsarchiv Teil von 2008 Teil von Mai

© 1998-2008 Seite Impressum, Software: Classic Forum