CSS Tabellenangaben nur für bestimmte Tabellen

[CssTester]

Hallo, ich habe CSS Angaben gefunden die Tabellen für Smartphones anders darstellen. Ich habe jedoch noch andere Tabellen auf der Seite. Wie muss man die CSS Angaben ändern damit es nur für eine bestimmte Tabelle auswirkt? Die gewünschte Tabelle ist in einem Div und hat eine eigene ID

<div id="TabellenBereich">
  <table id="example">
...

	table, thead, tbody, th, td, tr { 
		display: block; 
	}
	
/* Hide table headers (but not display: none;, for accessibility) */
thead tr { 
		position: absolute;
		top: -9999px;
		left: -9999px;
}
td:nth-of-type(1):before { content: "Spalte1"; }
	td:nth-of-type(2):before { content: "Spalte 2"; }
	td:nth-of-type(3):before { content: "Spalte 3"; }

Ich dachte wenn ich die CSS ändere und immer die DIV ID voranstelle dann wäre es ok.

#TabellenBereich table, thead, tbody, th, td, tr {

und

#TabellenBereich thead tr {

und

#TabellenBereich td:nth-of-type(1):before { content: "Spalte1"; }

..

Aber das klappt so nicht.

Gruss

[Tabellenkalk]

Hallo,

schau dir mal unsere Wikiseiten zum Thema Selektoren an.

Deine Probleme sind einerseits das Aufzählen mehrerer Selektoren und andererseits suchst du den Id-Selektor.

Gruß
Kalk

[CssTester]

Hallo beim posten hier wurde die Formatierung geändert. ich schrieb ja das ich es mit dem ID Selektor versucht hatte

#TabellenBereich table, thead, tbody, th, td, tr {

Was ich halt nicht so recht weiss und ich auch in dem Artikel nicht finde wie man es macht wenn man mehrere tags hintereinander drin hat.

Gruss

[paulchen]

#TabellenBereich table, thead, tbody, th, td, tr {

#TabellenBereich table {...}
#TabellenBereich th {...}
...
#TabellenBereich td {...}

[Auge]

Hallo

ich schrieb ja das ich es mit dem ID Selektor versucht hatte

#TabellenBereich table, thead, tbody, th, td, tr {

Was ich halt nicht so recht weiss und ich auch in dem Artikel nicht finde wie man es macht wenn man mehrere tags hintereinander drin hat.

Man zählt sie auf. Allerdings macht man das vollständiger, als in deinem Beispiel. Der Selektor #TabellenBereich table wählt alle Tabellen innerhalb des Elements mit der ID „TabellenBereich“ aus. Die folgend aufgezählten Elemente (thead, tbody, th, td, tr) selektieren aber alle Elemente der genannten Typen, die im Dokument zu finden sind, also auch die, die sich nicht innerhalb von „TabellenBereich“ befinden.

Deine Selektorliste ist folgende.

#TabellenBereich table, #TabellenBereich thead, #TabellenBereich tbody, #TabellenBereich th, #TabellenBereich td, #TabellenBereich tr {

Du solltest aber noch einmal nachdenken, ob du alle Selektoren brauchst. So sieht mir die Liste zu umfangreich aus, aber genau sähe ich es auch nur mit Kenntnis der Quelltexte und deines Ziels.

Tschö, Auge

[Tabellenkalk]

Hallo,

ich habe CSS Angaben gefunden die Tabellen für Smartphones anders darstellen.

Aber das klappt so nicht.

du suchst vermutlich Media-Queries.

Gruß
Kalk

[Gunnar Bittersmann]

@@CssTester

Von hinten nach vorne:

Ich dachte wenn ich die CSS ändere und immer die DIV ID voranstelle dann wäre es ok.
#TabellenBereich table, thead, tbody, th, td, tr {

Warum das nicht funktioniert, haben andere schon gesagt. Was man gegenwärtig tun muss auch.

Zukünftig wird das einfacher gehen:

#TabellenBereich :matches(table, thead, tbody, th, td, tr)

Siehe :matches()

/* Hide table headers (but not display: none;, for accessibility) */ thead tr { position: absolute; top: -9999px; left: -9999px; }

-9999px ist keine gute Idee. Da gibt’s bessere.

<div id="TabellenBereich">  
  <table id="example">`

Das div ist wohl völlig überflüssig.

LLAP