✔ Komplexes Stylesheet als Klasse

[FrankWST]

Hallo,

auf http://icant.co.uk/csstablegallery/ gibt es einige schöne Stylesheets um Tabellen zu formatieren.
Leider sind diese nicht so erstellt, dass sie einen Klassennamen haben. D.h. die Formatierung gilt dann für alle Tabellen.
Kann mir jemand erklären, wie man diese als Klasse definiert?
Z.B. diese:

table a, table, tbody, tfoot, tr, th, td, table caption {
	font-family: Verdana, arial, helvetica, sans-serif;
	background:#262b38;
	color:#fff;
	text-align:left;
	font-size:12px;
}
table, table caption {
	border-left:3px solid #567;
	border-right:3px solid #000;
}
table {
	border-top:1px solid #567;
	border-bottom:3px solid #000;
}
table a {
	text-decoration:underline;
	font-weight:bold;
}
table a:visited {
	background:#262b38;
	color:#abc;
}
table a:hover {
	text-decoration:none;
	position:relative;
	top:1px;
	left:1px;
}
table caption {
	border-top:3px solid #567;
	border-bottom:1px solid #000;
	font-size:20px;
	font-weight:bold;
}
table, td, th {
	margin:0px;
	padding:0px;
}
tbody td, tbody th, tbody tr.odd th, tbody tr.odd td {
	border:1px solid;
	border-color:#567 #000 #000 #567;
}
td, th, table caption {
	padding:5px;
	vertical-align:middle;
}
tfoot td, tfoot th, thead th {
	border:1px solid;
	border-color:#000 #567 #567 #000;
	font-weight:bold;
	white-space:nowrap;
	font-size:14px;
}

Vielen Dank,
Frank

 

[Maik]

Hi,

erübrigt sich diese Frage eigentlich nicht? Oder ist dir der Klassenbezeichner kein Begriff, um zu wissen, wie er im Stylesheet definiert wird?

<table class="Klassenname"> ... </table>

Diesen Klassenbezeichner hängst du in den einzelnen Selektoren bei jedem vorhandenen table-Element hinten an - also z.B.:

table.Klassenname a, table.Klassenname, tbody, tfoot, tr, th, td, table.Klassenname caption {
        font-family: Verdana, arial, helvetica, sans-serif;
        background:#262b38;
        color:#fff;
        text-align:left;
        font-size:12px;
}

Wenn dir in dem Stylesheet der eine oder andere Selektor noch nicht spezifisch genug ist, weil er Tabellen in der Seite tangiert, die nicht mit dem CSS formatiert werden sollen, stellst du einfach table.Klassenname vorne an, wie z.B. hier:

table.Klassenname tfoot td, table.Klassenname tfoot th, table.Klassenname thead th {
        border:1px solid;
        border-color:#000 #567 #567 #000;
        font-weight:bold;
        white-space:nowrap;
        font-size:14px;
}

mfg Maik

 

[FrankWST]

Hallo Maik,

danke für Deine Hilfe. Den Klassenbezeichner kenne ich wohl, aber mir war bei diesem Beispiel nicht klar, wo er im CSS-Anteil überall eingetragen werden muss.

Gruß,
Frank

 

[FrankWST]

OK, funktioniert wunderbar. Sehr gut erklärt. Danke noch mal.
Gruß, Frank