border-left außer in erster Spalte - ist das möglich?

[Bettina]

Hallo,

Ich möchte gerne eine Tabelle mit Hilfe von css definieren, die aus 1 oder 2 Spalten und einer Zeile besteht. Die Spalten werden dynamisch erzeugt.

ist eine Spalte zu sehen schaut es so aus:

wert1

sind zwei spalten zu sehen schaut es so aus:

wert1 | wert2

Kann ich mithilfe von Stylesheets den 'strich' als border definieren,
welcher aber nur angezeigt wird, wenn 2 spalten vorhanden sind? kann man das evtl. mit den angaben für border-left (1px) und dem kasten außenherum (0px) definieren?

Es ist nicht möglich zwei verschiedene class zu beschreiben, da die spalten wie schon erwähnt dynamisch geniert werden, und für alle gleich sein müssen.

Kann mir jemand folgen und weiss einen Rat?

Wie immer für jede Hilfe dankbar!
Bettina

[Michael H.]

Mal blöd gefragt: Warum benutzt du für 2 Werte eine Tabelle?
Verwende doch einfach divs:

<div class="first">
   wert1
</div>

und evtl. noch den zweiten wert:

<div class="next">
  wert2
</div>

der first bekommt keinen rahmen, alle NEXT-divs kommen einen border-left.
first UND next sind display:inline, dann stehen die auch brav nebeneinander.

gar nicht so schwer, oder?

[wahsaga]

hi,

first UND next sind display:inline, dann stehen die auch brav nebeneinander.

Und durch display:inline kannst du den Dingern keine Breite mehr geben, d.h. bei mehreren "Zeilen" mit unterschiedlich breiten "Zellen"-Inhalten stehen die Striche irgendwo rum.

gar nicht so schwer, oder?

Gar nicht so gut, oder?

gruß,
wahsaga

[Bettina]

Hallo Michael,

irgentwie ist meine antwort verschwunden. also noch einmal:
die spalten oder werte werden dynamisch generiert. deshalb kann ich weder divs noch klassen definieren. ich brauche eine möglichkeit mit einer definition hinzukommen.

noch eine idee?

trotzdem danke.

[wahsaga]

hi,

die spalten oder werte werden dynamisch generiert.

Von dir selber (deinem Script/Programm)?

deshalb kann ich weder divs noch klassen definieren.

ich brauche eine möglichkeit mit einer definition hinzukommen.

border für alle Elemente einer "Zeile" definieren, und für :first-child der Zeile border wieder aufheben (border:none).

gruß,
wahsaga

[Bettina]

danke! hört sich gut an -
werd mal sehen wie ich das umsetzen kann.

grüße,
Bettina

[Cheatah]

Hi,

border für alle Elemente einer "Zeile" definieren, und für :first-child der Zeile border wieder aufheben (border:none).

bzw. border für alle Elemente definieren, die nicht erstes Kind sind. Das dürfte mit ungefähr den gleichen Browsern möglich sein.

Cheatah

[Bettina]

Hallo wahsaga,

habe gerade in css:4you gesehen, dass der i.e. das nicht interpretiert. ist das richtig?

Ferner scheine ich wohl etwas falsch zu machen. Ich habe es versucht mit:

td.server {
  border-left: 1px solid #ff0000;
   font-family: 'helvetica','arial',sans-serif;
  font-size: 12px;
  padding: 5px;
  }

td.server:first-child {
  border: none
  }

im td dann class="server" vermerkt.
Ich glaube ich stehe gerade etwas neben mir. Vielleicht kannst Du noch einmal helfen?

Viele Grüße,
Bettina

[Cheatah]

Hi,

habe gerade in css:4you gesehen, dass der i.e. das nicht interpretiert. ist das richtig?

ja.

Ferner scheine ich wohl etwas falsch zu machen.

Das äußert sich wie?

im td dann class="server" vermerkt.

Warum?

Cheatah

[Bettina]

Hi,

habe gerade in css:4you gesehen, dass der i.e. das nicht interpretiert. ist das richtig?

ja.

Ferner scheine ich wohl etwas falsch zu machen.

Das äußert sich wie?

es funktioniert mit der angegebenen Syntax nicht. Die border werden auch beim ersten td interpretiert.

im td dann class="server" vermerkt.

Warum?

weil ich diese class in den styles definiert habe, s.o. ...

Bettina

[Cheatah]

Hi,

Ferner scheine ich wohl etwas falsch zu machen.
Das äußert sich wie?
es funktioniert mit der angegebenen Syntax nicht. Die border werden auch beim ersten td interpretiert.

ein CSS-fähiger Browser müsste Deinen Code wie von Dir gewünscht umsetzen.

im td dann class="server" vermerkt.
Warum?
weil ich diese class in den styles definiert habe, s.o. ...

Das ist so, als würdest Du jemanden begraben, weil er kurz danach tot ist. Er muss _erst_ tot sein, _dann_ wird er begraben. *Nie* wird HTML-Code wegen irgend welcher CSS-Angaben manipuliert.

Cheatah

[wahsaga]

hi,

td.server:first-child {

Wie du in der Beschreibung von :first-child sicher inzwischen nachgelesen hast, bezieht sich dieser Selektor auf das erste _Kindelement_ des Elementes, auf das du ihn anwendest.

td ist aber sicherlich kein Kind von td, sondern ...?

gruß,
wahsaga

[Bettina]

Mag sein dass ich auf dem Holzweg bin. Ich würde denken ein Kindelement  von tr. Aber ich bekomm wohl die Syntax nicht hin.

Gibst Du mir noch ein Tip?

Sorry für die lange Leitung.
Bettina

td.server:first-child {

Wie du in der Beschreibung von :first-child sicher inzwischen nachgelesen hast, bezieht sich dieser Selektor auf das erste _Kindelement_ des Elementes, auf das du ihn anwendest.

td ist aber sicherlich kein Kind von td, sondern ...?

gruß,
wahsaga

[Cheatah]

Hi,

td.server:first-child {
Wie du in der Beschreibung von :first-child sicher inzwischen nachgelesen hast, bezieht sich dieser Selektor auf das erste _Kindelement_ des Elementes, auf das du ihn anwendest.

nein, es bezieht sich auf dasjenige Element, welches das erste Kind seines Vaters ist. Also in diesem Fall auf dasjenige als "server" klassifizierte <td>-Element, vor dem innerhalb des elterlichen <tr> kein weiteres <td> oder <th> kommt.

Cheatah

[Bettina]

Aber dann wäre die Syntax ja korrekt, oder nicht?

td.server {
  border-left: 1px solid #CC0000;
   font-family: 'Helvetica Neue','arial',sans-serif;
  font-size: 12px;
  padding: 5px;
  }

td.server:first-child {
  border: none
  }

nein, es bezieht sich auf dasjenige Element, welches das erste Kind seines Vaters ist. Also in diesem Fall auf dasjenige als "server" klassifizierte <td>-Element, vor dem innerhalb des elterlichen <tr> kein weiteres <td> oder <th> kommt.

Cheatah

[Cheatah]

Hi,

Aber dann wäre die Syntax ja korrekt, oder nicht?

soweit ich es hier sehen kann: Ja. Wobei ich mich frage, warum Du die Schriftgröße in px angibst.

Cheatah

[Bettina]

Danke für Eure Hilfe!
Bettina

[Gernot Back]

Hallo Bettina,

ist eine Spalte zu sehen schaut es so aus:

wert1

sind zwei spalten zu sehen schaut es so aus:

wert1 | wert2

Kann ich mithilfe von Stylesheets den 'strich' als border definieren,
welcher aber nur angezeigt wird, wenn 2 spalten vorhanden sind? kann man das evtl. mit den angaben für border-left (1px) und dem kasten außenherum (0px) definieren?

Ja, wie wäre es mit unten stehendem Code?

Das funktioniert im IE6, Firefox 1.5.0.3 und Opera 8.54

ich meine mich auch zu erinnern, dass ich diesen Ansatz, allerdings mit nicht mit Borders sondern mit unterschiedlicher Schriftfarben- und Hintergrundformatierung (da braucht man dann auch keine hineingeschachtelten DIV-Elemente) am Safari und Firefox am Mac erfolgreich getestet habe:

  
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"  
       "http://www.w3.org/tr/html4/loose.dtd">  
<html>  
<head>  
<title>Erste Spalte anders formatieren</title>  
<style type="text/css">  
[code lang=css]  
table {  
 background-color:white;  
 border-collapse:collapse;  
}  
  
td div {  
 padding:0 3px;  
}  
  
* html td div {  
 padding-left:0;  
}  
  
* html td {  
 border-left: solid 1px;  
}  
  
td:last-child div {  
 border-left:solid 1px red;  
 padding-left:3px;  
}  
  
td:first-child div {  
 border-left:none;  
 padding-left:0;  
}  

</style>

</head>
<body>

<table border="0">
 <colgroup>
  <col style="border:solid 1px white" />
  <col style="border-left:solid 1px red;padding-left:3px" />
 </colgroup>
 <tr>
  <td><div>wert1</div></td>
  <td><div>wert2</div></td>
 </tr>
 <tr>
  <td><div>wert3</div></td>
  <td><div>wert4</div></td>
 </tr>
 <tr>
  <td><div>wert5</div></td>
 </tr>
 <tr>
  <td><div>wert6</div></td>
  <td><div>wert7</div></td>
 </tr>
 <tr>
  <td><div>wert8</div></td>
  <td><div>wert9</div></td>
 </tr>

</table>

</body>
</html>
[/code]

Gruß Gernot