CSS: alle Colspan-Zeilen immer mit bestimmter Höhe?

volllaie

Suche verzweifelt nach einer Möglichkeit, alle Colspan-Zeilen einer Tabelle immer automatisch eine gewisse Höhe zuzuweisen. Bisher sieht die "Lösung" so aus, dass man jeder Colspan immer dieselbe bestimmte id mit den Höhen-Werten zuweisen muss. Da es hunderte bis tausende Colspans werden, wäre das eine arg aufwändige Arbeit.

=> Ließe sich das nicht automatisch irgendwie im css einstellen/ coden?

Wäre äußerst dankbar über Hilfe!

PS: wer mag, bekommt daher auch einen oder mehrere Backlinks geschenkt wenn er das Problem lösen kann. Oder auch etwas überwiesen - ihr seht, mir ist es schon arg wichtig
PPS: geht um Wordpress, also ganz vielleicht gäbe es hierfür sogar ein Plugin? Habe bisher noch nichts gefunden.

Gastl

Also Gugel findet auf Anhieb was dazu, bei dir nicht?
Nur ein Treffer -> http://www.web-toolbox.net/webtoolbox/tab…zellenhoehe.htm

volllaie

Danke, aber es geht ganz speziell nur darum, allen Colspan-Zeilen einer Tabelle immer eine gewisse Höhe zu geben. Diese Colspan-Zeilen sind alle ohne Inhalt, daher dürfte da kein Problem auftauchen. Dazu steht im Link leider nichts.

Geht das?

Eine andere Idee von mir als Nichtcoder: Könnte man nicht generell alle Zeilen in ihrer Höhe einmalig festlegen, sodass aber natürlich jene, welche Textinhalt haben,dann automatisch sich je nach Textlänge in der Höhe anpassen - die leeren Colspan aber behalten die definierte Höhe? Wäre das eine Alternative?

---

EDIT

Bis jetzt sieht die unbefriedigende Lösung so aus: allen Colspan-Zeilen (= alle zellen einer zeile der 5 spaltigen tabelle werden als colspan in jeder zweiten Zeile zwecks optischer Abhebung komplett zusammengefügt) muss man manuell eine bestimmte id zuweisen, in der die höhe festgelegt. Das ein paar tausend mal (!) per Hand zu machen, wäre aber ziemlich... unbefriedigend Daher frage ich hier nach einer Lösung. Danke euch!

Hier, so sollte es dann aussehen:

djheke

Na, gibt doch einfach jedes <td> ein Padding.

Code

table td {
 padding:5px;
}

und für die Colspans

Code

table tr:nth-child(even) td {
 padding:10px 5px;
}

volllaie

Klingt gar nicht so schlecht, danke erstmal dafür! Bin aber leider kein Coder und nur Laie. Padding ist doch der erzwungene Abstand zum Rand, oder? Was würde das in diesem Fall genau bedeuten? Und wieso 5 Pixel generell und die colspans dann mit "10px 5px"? Ich habe eben herausgefunden, dass dein befehl "nth-child(even)" immer jede zweite zeile separat behandelt. Klingt schon mal ganz schlüssig. Gäbe es dann Probleme in der Darstellung, wenn man mal eine etwas andere Anordnung verwendet? Also zB wenn ich zusammengehörende Produkte mal nicht per colspan optisch voneinander trenne sondern normal als zeilen untereinander anordne? Dann wäre meinem Laienverständnis nach ein optisches Chaos die Folge weil auf einmal ganz komischer Abstand vom Text zum Tabellen-/Zellen-Rand, oder?

Wie du siehst, bin ich leider Laie. Wäre trotzdem super, wenn du mir auf die Sprünge hilfst

djheke

Hallo,
die Pixelwerte sind natürlich nur Beispielhaft und Padding legt den Innenabstand fest. Wenn nicht jede zweite Zeile angesprochen werden, ist (even) nicht geeignet. Dafür eignet sich aber der sog. Attributselektor td[colspan].

HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Attributselektor</title>
<style>


table {
 width:50%;
 margin:30px auto;
 border-collapse:collapse;
}


table td {
 border:1px solid #000;
 padding:5px;
 background:#eee;
}


table td[colspan]  {
 padding:20px; /* Gesamtabstand nach oben und unten 40 Pixel */
 border:none;
 background:transparent;
}


</style> 
</head>
<body>


<table>
<tr>
<td>Bild</td><td>Produktname</td><td>Prduktbeschreibung</td><td>Preis</td><td>Link</td>
</tr>
<tr><td colspan="5"></td></tr>
<tr>
<td>Bild</td><td>Produktname</td><td>Prduktbeschreibung</td><td>Preis</td><td>Link</td>
</tr>
<tr><td colspan="5"></td></tr>
<tr>
<td>Bild</td><td>Produktname</td><td>Prduktbeschreibung</td><td>Preis</td><td>Link</td>
</tr>
<tr>
<td>Bild</td><td>Produktname</td><td>Prduktbeschreibung</td><td>Preis</td><td>Link</td>
</tr>
<tr><td colspan="5"></td></tr>
<tr>
<td>Bild</td><td>Produktname</td><td>Prduktbeschreibung</td><td>Preis</td><td>Link</td>
</tr>
</table>


</body>
</html>

Alles anzeigen

Eine elegantere Lösung wäre diese.

HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Attributselektor</title>
<style>


table {
 width:50%;
 margin:30px auto;
 border-collapse:collapse;
}


table td {
 border:1px solid #000;
 padding:5px;
 background:#eee;
}


table th[colspan]  {
 padding:20px 0px 0px 0px;
 border:none;
 background:transparent;


}


table td , table th {
 text-align:center;
}


table th b {
 margin-left:-1px;
 padding:5px;
 display:block;
 background:#09c;
 color:#fff;
 border:1px solid #000;
 border-bottom:none;
}


table img {
 width:100px;
}
</style> 
</head>
<body>


<table>
<tr>
<th colspan="5"><b>Jeanshosen</b></th>
</tr>


<tr>
<td><img src="bild2.jpg" alt="Bild"></td><td>Produktname</td><td>Prduktbeschreibung</td><td>Preis</td><td><a href="#">Link</a></td>
</tr>


<tr>
<th colspan="5"><b>Jeansjacken</b></th>
</tr>


<tr>
<td><img src="bild2.jpg" alt="Bild"></td><td>Produktname</td><td>Prduktbeschreibung</td><td>Preis</td><td><a href="#">Link</a></td>
</tr>


<tr>
<th colspan="5"><b>Sportschuhe</b></th>
</tr>


<tr>
<td><img src="bild2.jpg" alt="Bild"></td><td>Produktname</td><td>Prduktbeschreibung</td><td>Preis</td><td><a href="#">Link</a></td>
</tr>


<tr>
<td><img src="bild2.jpg" alt="Bild"></td><td>Produktname</td><td>Prduktbeschreibung</td><td>Preis</td><td><a href="#">Link</a></td>
</tr>


<tr>
<th colspan="5"><b>Accessoires</b></th>
</tr>


<tr>
<td><img src="bild2.jpg" alt="Bild"></td><td>Produktname</td><td>Prduktbeschreibung</td><td>Preis</td><td><a href="#">Link</a></td>
</tr>
</table>


</body>
</html>

Alles anzeigen

Tags