Tabellenzeile ganz ausblenden

[Tim Tepaße]

Hallo,

Ich würde gerade die Tabellenzeile ausblenden, in der das Bild "10 Jahre Forum" ist und der Text SELFHTML Forum. Wie kann ich das erreichen?

Erstmal in den Quellcode des Forums gucken:

~~~html <table id="kopf">
  <tr>
  <td id="kopf-logo"><img src="http://src.selfhtml.org/logo.gif" width="106" height="109" alt="SELFHTML" /></td>
  <td id="kopf-titel">
  <p>Das Forum zu SELFHTML</p>
  <h1>SELFHTML Forum</h1>
  </td>
  </tr>
  <td>
  <!-- Weitere Tabellenzeilen mit Inhalt folgen -->

  
Du willst also nur die erste Zeile ausblenden. Dummerweise hat diese keine praktische ID wie viele andere Elemente im Forumsquelltext. Aber für das erste Kindelement eines anderen Elementes gibt es die Pseudoklasse [:first-child](http://de.selfhtml.org/css/eigenschaften/pseudoformate.htm#first_line_letter_child), das an dieser Stelle in SELFHTML sicherlich blöd untergebracht ist. CSS 3 definiert noch haufenweise andere sogenannter [struktureller Pseudoklassen](http://www.w3.org/TR/css3-selectors/#structural-pseudos) mit denen man das Selektieren von Elementen besser eingrenzen kann. Angewendet sieht das dann so aus:  
  
  ~~~css
#kopf tr:first-child {  
      display:none;  
  }

Lies: Für alle ersten Tabellenzeilen unterhalb des Elementes mit der ID "kopf", wende die Deklaration "display:none;" an.

Das gilt übrigens für alle ersten Tabellenzeilen innerhalb der Tabelle #kopf. D.h. wenn die große Kopftabelle weitere Untertabellen enthielte – sie tut es nicht – würden auch die angenommenen ersten Tabellenzeilen dieser angenommenen Untertabellen ausgeblendet. Wenn man wirklich genau nur diese eine Tabellenzelle nehmen will und auf alle hypothetischen Fälle vorbereiten will, dann empfiehlt es sich, nicht den generellen Nachfahren-Selektor zu nehmen, der für alle Nachfahren gilt, egal wie verschachtelt, sondern den direkten Kindselektor (">"):

#kopf > tbody > tr:first-child

Zwischen dem table-Element und dessen Tabellenzeilen liegt immer ein Tbody-Element, auch wenn es nicht im Quellcode notiert wurde. Die tatsächliche Struktur innerhalb des Browsers ist also eher:

table
  └─tbody
    └─tr

Nachzuprüfen ist das z.B. mit Firefox' DOM Inspector oder Safaris Web Inspector. Übrigens kann eine Tabelle auch mehrere tbody-Elemente beinhalten; wenn man also wirklich, wirklich ganz korrekt sein will, wäre die korrekte Variante so:

#kopf > tbody:first-child > tr:first-child

On this road lied madness. Nicht dass diesen Anwendungsfall relevant wäre, natürlich. Die first-child-Pseudoklasse und der Kindsselektor funktionieren übrigens nur in modernen Browsern; für ein Userstylesheet ist das natürlich eher irrelevant, es sei denn man heisst Martin. ;)

Nebenbei: Ich hab bei der großen Kopftabelle die Erfahrung gemacht, dass diese eher doof anzupassen ist, wenn diese im Tabellenlayoutmodell gerendert wird, z.B. wenn man nur eine Tabellenzelle ausblenden will. Praktischer fand ich es, alle tabellenspezifischen Elemente der Kopftabelle mit display:block in Blockelemente zu verwandeln und dann auf Fall-für-Fall-Basis auszublenden oder spezifisch zu formatieren. Wobei einem auch da die Struktur in den Weg kommen kann.

Einen Hauch weiter unten gibt es übrigens einen Thread, in dem verschiedene vorhandene Userstylesheets verlinkt werden. Gut zu abgucken und inspirieren lassen.

Tim