Colspan und style width in Prozent

[Gunnar Bittersmann]

@@Guest191218

Danke für die prompte Unterstützung!

Eine prompte Unterstützung ist nicht immer eine gute Unterstützung. Hier ist es keine gewesen. (Deshalb das Minus von mir.)

Gute Unterstützung wäre gewesen zu sagen, sämtliche style-Attribute zu entsorgen (und die border- und cellpadding-Attribute gleich mit) und die Breiten der Spalten im Stylesheet anzugeben:

td:nth-child(1), td:nth-child(2) { width: 25% }

td:nth-child(3):not([colspan]) { width: 20% }

td:nth-child(4) { width: 30% }

(Das geht davon aus, dass colspan nur in der 3. Spalte vorkommt.)

Es ist aber sicher keine gute Idee, dass so für alle Tabellen anzugeben. Also entweder der Tabelle eine ID (bzw. Klasse?) verpassen und die Zellen als Nachfahren selektieren: #this td:nth-child(1):not([colspan]) usw.

Die Zellen mit :nth-child() zu selektieren ist aber auch nicht die beste Idee. Wenn nachträglich Spalten hinzukommen oder wegfallen oder deren Reihenfolge vertauscht wid, müsste man das Stylesheet ändern. Das vermeidet man, indem man den Spalten IDs gibt:

<table>
	<colgroup>
		<col id="foo"/>
		<col id="bar"/>
		<col id="baz"/>
		<col id="quz"/>
	<colgroup>
	<tbody>
		⋮
	</tbody>
</table>

Die IDs sollten bei dir nicht foo, bar, baz, quz heißen, sondern nach dem jeweiligen Spalteninhalt benannt sein.

Im Stylesheet dann:

#foo, #bar { width: 25% }

#baz { width: 20% }

#quz { width: 30% }

Außerdem noch anstelle der border- und cellpadding-Attribute sowas wie:

td
{
	border: thin solid gray;
	padding: 0.5em;
}

und vermutlich auch

table { border-collapse: collapse }

LLAP 🖖