Tabellenspalte eines Nachbarelements soll kollabieren

Jeziro · #1 (**permalink**) 22.11.2016, 15:53

Hallo zusammen,
ich muss HTML-Code layouten, den ein Computerprogramm ausgibt. Leider kann ich keinen Einfluss auf die Ausgabe des Programms nehmen. Dieses erzeugt im Wesentlichen zwei Tabellen mit gleicher Spaltenanzahl und Spaltenbezeichnung. Die Anzahl der Zeilen variiert von Ausgabe zu Ausgabe. Leider sind die Klassenbezeichnugen innerhalb der Tabellen auch identisch. Einen umschließenden DIV-Kontainer gibt es auch nicht. Als einziges Unterscheidungsmerkmal ist den Tabellen eine Überschrift vorangestellt, welche mit dem <p>-Tag eingeschlossen ist. Die Überschriften haben unterschiedliche Klassen.
Gibt es eine Möglichkeit, mit Hilfe von CSS anhand der unterschiedlichen Klassen der Überschriften einzelne Spalten der zweiten Tabelle kollabieren zu lassen? Alle meine Versuche sind gescheitert.

Der Code sieht etwa so aus.

HTML-Code:

<p class="Ueberschrift1">Überschrift1</p>
<table>
   <tr>
      <th class="A">A</th>
      <th class="B">B</th>
      <th class="C">C</th>
      <th class="D">D</th>
      <th class="E">E</th>
      <th class="F">F</th>
      <th class="G">G</th>
   </tr>
   <tr>
      <td class="A">...</td>
      <td class="B">...</td>
      <td class="C">...</td>
      <td class="D">...</td>
      <td class="E">...</td>
      <td class="F">...</td>
      <td class="G">...</td>
   </tr>
</table>
<p class="Ueberschrift2">Überschrift2</p>
<table>
   <tr>
      <th class="A">A</th>
      <th class="B">B</th>
      <th class="C">C</th>
      <th class="D">D</th>
      <th class="E">E</th>
      <th class="F">F</th>
      <th class="G">G</th>
   </tr>
   <tr>
      <td class="A">...</td>
      <td class="B">...</td>
      <td class="C">...</td>
      <td class="D">...</td>
      <td class="E">...</td>
      <td class="F">...</td>
      <td class="G">...</td>
   </tr>
</table>

MrMurphy · #2 (**permalink**) 22.11.2016, 16:13

Hallo

Zitat:

Gibt es eine Möglichkeit, mit Hilfe von CSS anhand der unterschiedlichen Klassen der Überschriften einzelne Spalten der zweiten Tabelle kollabieren zu lassen?

Ich weiß nicht was du mit kollabieren meinst.

Um bestimmte Elemente (in deinem Fall die Spalten) mit CSS beeinflussen zu können gibt es Selektoren (selectors).

Die erste Tabelle kann so mit

Code:

table:nth-of-type(1)

und die zweite mit

Code:

table:nth-of-type(2)

ausgewählt werden. Danach folgen dann die üblichen weiteren Angaben zum selektieren einzelner Elemente.

Gruss

MrMurphy

Jeziro · #3 (**permalink**) 22.11.2016, 16:43

Hallo MrMurphy,
danke für Deine schnelle Antwort.

Mit kollabieren meine ich ausblenden. Ich möchte, dass die Tabelle 2 anstatt mit 7 Spalten mit 5 Spalten angezeigt wird. Ausblenden möchte ich die Spalten E und G.

protonenbeschleuniger · #4 (**permalink**) 22.11.2016, 18:08

Dann meinst du ausblenden nicht kollabieren.

Im Kontext von CSS und Tabellen wäre ansonsten nur das border-collaps das ähnlich klingt.border-collapse: Tabellenrahmen: CSS-Referenz auf CSS 4 You - The Finest in Stylesheets

Zum ausblenden kannst du die display oder visibility verwenden.
display: Anzeigeart: CSS-Referenz auf CSS 4 You - The Finest in Stylesheets
visibility: Unsichtbare Elemente: CSS-Referenz auf CSS 4 You - The Finest in Stylesheets

MrMurphy · #5 (**permalink**) 22.11.2016, 19:10

Hallo

In der zweiten Tabelle kannst du Spalte E mit folgender CSS-Anweisung ausblenden:

Code:

      table:nth-of-type(2) tr :nth-child(5) {
         display: none;
      }

Und die Spalte G mit folgender CSS-Anweisung:

Code:

      table:nth-of-type(2) tr :nth-child(7) {
         display: none;
      }

Natürlich können auch beide Anweisungen zusammengefasst werden:

Code:

      table:nth-of-type(2) tr :nth-child(5),
      table:nth-of-type(2) tr :nth-child(7) {
         display: none;
      }

Dabei gehe ich davon aus, dass auf der Seite zwei Tabellen vorhanden sind, die sich beide zusammen in einem übergeordneten Container befinden.

Durch nth-of-type wird die Selektion von anderen Einflüssen unabhängig. Mit Selektoren kann auch von den Klassen der p-Elemente ausgegangen werden. Die Auswahl kann einem aber um die Ohren fliegen, wenn irgendwann später Änderungen vorgenommen werden, zum Beispiel zwischen den Absätzen und den Tabellen weitere Infos eingefügt werden.

Leerzeichen tr wählt dann alle Zeilen der ausgewählten Tabelle aus.

Leerzeichen :nth-child() wählt dann in jeder der ausgewählten Zeilen (in diesem Beispiel alle) das innerhalb folgende Element mit der in den Klammern eingetragenen Zahl. Unabhängig davon, um was für ein Element es sich handelt. Da es sich in dem vorliegenden Fall nur um th und td handeln kann und beide betroffen sein sollen ist eine weitere Eingrenzung auch nicht notwendig.

Zusatzinfo:

Kollabieren (collapse) hat in HTML/CSS eine bestimmte Bedeutung und sollte deshalb auch nur in dem Zusammenhang verwendet werden.

Und zwar bedeutet es "zusammenfallen, übereinanderschieben" und nicht "nicht mehr vorhanden sein, verschwunden sein".

Häufig taucht die Bezeichnung in Zusammenhang mit Tabellenrahmen oder waagerechten Abständen von Block-Elementen (collapsing margins) auf. In beiden Fällen verschieben sich die Rahmen/Abstände so weit übereinander, bis nur noch der breitere übrig bleibt.

Wenn der untere Abstand (margin) eines oberen Elements zum Beispiel 12px beträgt, der obere Abstand des darunter liegenden Elements hingegen 7px, haben die beiden Elemente keinen Abstand von 19px, sondern von 12px.

Gruss

MrMurphy

Jeziro · #6 (**permalink**) 22.11.2016, 21:21

Hallo MrMurphy,
genau das war die Anweisung, die ich gesucht habe. So funktioniert es. Auch die Erläuterung zum collapse hat mir sehr weitergeholfen. Wieder was dazu gelernt. Vielen Dank dafür.

@protonenbeschleuniger: Danke für die Links.

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Tabellenspalte unterschiedlich breit trotz CSS-Breitenangabe	corona	CSS	6	20.05.2012 15:46
Menu darf nicht in zwei Reihen kollabieren	fankoff	CSS	1	29.11.2011 06:50
In einem Rutsch eine ganze Tabellenspalte durch 2 hoch alten Wert ersetzen?	braindead	Serveradministration und serverseitige Scripte	2	07.01.2008 18:17
Margins Kollabieren einfach nicht	braindead	CSS	2	24.12.2007 19:16
Scrollbar in einer Tabellenspalte	adler1860	CSS	1	15.09.2006 12:45