Tabellenbreite

[Gunnar Bittersmann]

@@MrMurphy1

Richtig. Da war ich zu schnell. Also

.konto tr>:nth-child(1),
.konto tr>:nth-child(4) {
   width:20%;
}
.konto tr>:nth-child(2),
.konto tr>:nth-child(3) {
   width:30%;
}

Kann man machen. Allerdings ist der Code nicht sprechend; man erkennt nicht auf den ersten Blick, welche Elemente damit gestylt werden (th und td, was im Selektor gar nicht vorkommt). Ich würde dafür schreiben:

.konto th,
.konto td
{
  width: 30%;
}

.konto th:first-child,
.konto th:last-child,
.konto td:first-child,
.konto td:last-child
{
  width: 20%;
}

Ist länger, aber selbsterklärend.

Zukünftig geht’s auch kürzer:

.konto :matches(th, td)
{
  width: 30%;
}

.konto :matches(th, td):matches(:first-child, :last-child)
{
  width: 20%;
}

The future is (almost) now.

Guckst du. Dummerweise setzt weder Autoprefixer noch Prefixfree :matches() in :-moz-any() und :-webkit-any() um, so dass ich mich hier eines Sass-Mixins bedient habe, um nicht den Deklarationsblock duplizieren zu müssen.

Nachtrag: Ginge hier aber auch ohne Sass; :matches() macht sich ja besonders bei der zweiten Regel bezahlt. Und darin ist nur eine Deklaration. Guckst du zweites Beispiel.

LLAP 🖖