Table padding

[Gunnar Bittersmann]

@@Hannes Weninger

Meine Tabelle

Bitte verwende für CSS-Probleme nicht JSFiddle.

und in dieser Tabelle werden manche Zelle makiert (z.B. die rote).

Nö, da ist keine Zelle markiert; ein td wie jedes andere. Du hast deren Inhalt markiert – nein, nicht einmal das; zum Markieren wären Elemente wie mark, em etc. da, nicht das bedeutungslose span.

Möchtest du nun die Zellen markieren oder die Inhalte? Für den zweiten Fall: für das entsprechende Element (das wie gesagt kein span sein sollte) display: inline-block; width: 100%.

---

BTW, dieses Markup scheint mir auch nicht korrekt:

        <tr>
            <th>Zeit</th>
            <th><sub>1</sub></th>
            <th><sup>2</sup></th>
            <th><sub>3</sub></th>
            <th><sup>4</sup></th>
            <th><sub>5</sub></th>
            <th><sup>6</sup></th>
            <th><sub>7</sub></th>
        </tr>

Die abwechselnde Hoch-/Tiefstellung hat keine semantische Funktion – sollte sich also nicht im Markup wiederfinden –, sondern dient allein der Darstellung – wäre also mit CSS zu lösen:

        <tr>
            <th>Zeit</th>
            <th>1</th>
            <th>2</th>
            <th>3</th>
            <th>4</th>
            <th>5</th>
            <th>6</th>
            <th>7</th>
        </tr>

.absenceTable thead tr:last-child th:nth-child(even)
{
  font-size: 0.8em;
  padding-top: 0.5em;
}

.absenceTable thead tr:last-child th:nth-child(odd):not(:first-child)
{
  font-size: 0.8em;
  padding-bottom: 0.5em;
}

Für Menschen mag das so besser lesbar sein, für den Browser schreibt man’s besser so:

.absenceTable thead tr:last-child th:nth-child(even)
{
  font-size: 0.8em;
  padding-top: 0.5em;
}

.absenceTable thead tr:last-child th:nth-child(2n+3)
{
  font-size: 0.8em;
  padding-bottom: 0.5em;
}

LLAP 🖖