Spaltenweise Formatierung

[Micha]

Hallo,

gint es eine einfache Möglichkeit, ganze Spalten einer Tabelle mit CSS zu formatieren? Ich dachte zunächst an colgroup bzw. col doch damit kann ich zB die Textausrichtung oder die Schriftfarbe (vermutlich Inhalt allg) nicht ändern. Wie schaffe ich es, dass eine Spalte zB rechtsbündig ist, ohne jedem TD eine Klasse zu geben?

Mit freundlichem Gruß
Micha

[Gunnar Bittersmann]

@@Micha:

gint es eine einfache Möglichkeit, ganze Spalten einer Tabelle mit CSS zu formatieren? Ich dachte zunächst an colgroup bzw. col doch damit kann ich zB die Textausrichtung oder die Schriftfarbe (vermutlich Inhalt allg) nicht ändern.

Im IE doch. (Obwohl der Tetx ja nich in den 'col'/'colgroup'-Elementen liegt, also deren Eigenschaften keinen Einfluss auf den Text in 'td'/'th'-Elementen haben sollten.)

Wie schaffe ich es, dass eine Spalte zB rechtsbündig ist, ohne jedem TD eine Klasse zu geben?

Andere Browser verstehen die Pseudoklasse ':first-child' und den Selektor für benachbarte Elemente. [CSS2 §5]

<table>  
 <col id="col1"/>  
 <col id="col2"/>  
 <col id="col3"/>  
 <tbody>  
  <tr>  
   <td>foo</td>  
   <td>bar</td>  
   <td>baz</td>  
  </tr>  
 </tbody>  
</table>

col  
{  
 width: 8em;  
}  
  
#col2 /* IE */  
{  
 text-align: right;  
 color: red;  
}  
  
td:first-child+td /* not IE */  
{  
 text-align: right;  
 color: red;  
}

In einer Regel die Selektoren zu gruppieren ('#col2, td:first-child+td') geht nicht, da der IE dann wegen seines Unverständnisses für ':first-child' und den Selektor für benachbarte Elemente die ganze Regel ignorieren würde.)

Wenn die erste Zelle jeder Zeile ein Zeilenkopf ('th'!!) ist, geht’s ohne Pseudoklasse: 'th+td'.

Live long and prosper,
Gunnar

[Micha]

Hallo Gunnar Bittersmann,

vielen Dank für Dein Beispiel. Es scheint jedoch bei verschachtlungen Probleme zu geben.

  
  <table id="polarCoords">  
  <colgroup>  
   <col id="col1"/>  
   <col id="col2"/>  
   <col id="col3"/>  
   <col id="col4"/>  
   <col id="col5"/>  
  </colgroup>  
   <thead>  
    <tr>  
     <th colspan="2">Parameter</th>  
     <th>Messwert</th>  
     <th>Unsicherheit</th>  
     <th>Ursprung</th>  
    </tr>  
   </thead>  
  
   <tbody>  
    <tr>  
     <th colspan="2">Standpunkt</th>  
     <td></td>  
     <td></td>  
     <td></td>  
    </tr>  
    <tr>  
     <td rowspan="3">&nbsp;</td>  
     <td>X</td>  
     <td><code>100.000</code> m</td>  
     <td><code>0.002</code> m</td>  
     <td>Netzausgleichung</td>  
    </tr>  
  
    <tr>  
  
     <td>Y</td>  
     <td><code>200.000</code> m</td>  
     <td><code>0.002</code> m</td>  
     <td>Netzausgleichung</td>  
    </tr>  
  
    <tr>  
  
     <td>Z</td>  
     <td><code>50.000</code> m</td>  
     <td><code>0.002</code> m</td>  
     <td>Netzausgleichung</td>  
    </tr>  
  
    <tr>  
     <th colspan="2">Messwert</th>  
     <td></td>  
     <td></td>  
     <td></td>  
    </tr>  
    <tr>  
     <td rowspan="3">&nbsp;</td>  
     <td>Strecke s</td>  
     <td><code>25.000</code> m</td>  
     <td><code>0.002</code> m + <code>2</code> ppm</td>  
     <td>Hersteller</td>  
    </tr>  
    <tr>  
     <td>Azimut r</td>  
     <td><code>50.000</code> gon</td>  
     <td><code>0.0003</code> gon</td>  
     <td>Hersteller</td>  
    </tr>  
    <tr>  
     <td>Zenit z</td>  
     <td><code>85.000</code> gon</td>  
     <td><code>0.0003</code> gon</td>  
     <td>Hersteller</td>  
    </tr>  
  
    <tr>  
     <th colspan="2">Instrument</th>  
     <td></td>  
     <td></td>  
     <td></td>  
    </tr>  
    <tr>  
     <td rowspan="6">&nbsp;</td>  
     <td>Zielachsfehler c</td>  
     <td><code>0.002</code> gon</td>  
     <td><code>0.0003</code> gon</td>  
     <td>Instrumentenkalibrierung</td>  
    </tr>  
    <tr>  
     <td>Kippachsfehler i</td>  
     <td><code>-0.004</code> gon</td>  
     <td><code>0.0003</code> gon</td>  
     <td>Instrumentenkalibrierung</td>  
    </tr>  
    <tr>  
     <td>Höhenindexfehler k</td>  
     <td><code>0.003</code> gon</td>  
     <td><code>0.0003</code> gon</td>  
     <td>Instrumentenkalibrierung</td>  
    </tr>  
    <tr>  
     <td>Additionskonstante a</td>  
     <td><code>-0.034</code> m</td>  
     <td><code>0.001</code> m</td>  
     <td>Instrumentenkalibrierung</td>  
    </tr>  
    <tr>  
     <td>Kompensator d</td>  
     <td><code>-0.0011</code> gon</td>  
     <td><code>0.0002</code> gon</td>  
     <td>Hersteller</td>  
    </tr>  
    <tr>  
     <td>Zielungsfehler b</td>  
     <td><code>0.0</code> m</td>  
     <td><code>0.0.0005</code> m</td>  
     <td>Anwender/Hersteller</td>  
    </tr>  
  
   </tbody>  
  </table>

Es werden bei Deinem CSS-Beispiel nicht die gewünschten Spalten selektiert. Die Spalten Messwert und Unsicherheit sollen rechtsbündig sein, da dies Ziffern und keine Strings sind. Der CODE-Tag im TD wird via JavaScript nachher durch ein Input ersetzt und der USer kann Werte eingeben; bei deaktivem JavaScript hat er eben die voreingestellten Werte - das war mein Plan und dies nur zur Info.

Mit freundlichem Gruß
Micha