EventListener schachteln für click/keyup-Behandlung

[Rolf B]

Hallo Nico R.,

Was ich nicht hingekriegt habe, ist, den Button die td auch in der Höhe ausfüllen zu lassen.

Wie hast Du es versucht? height:100% am Button? Diese Angabe bezieht sich auf das Elternelement. Das ist ein td. Welche Höhe hat das td? Keine explizite, du überlässt das Finden der Höhe dem Tabellenlayout.

Um mögliche Endlos-Abhängigkeiten zu vermeiden, ist CSS ziemlich schnell fertig damit, nach Bezugspunkten für Prozentangaben zu suchen. Der Button hat 100%, das Elternelement hat keine definite Höhe, und Schluss. Der Button bleibt bei seiner "natürlichen" Höhe, die sich aus Inhalt und Padding zusammensetzt. Und wird dann vom Table-Layout vertikal in der Zelle zentriert.

Lösung von außen nach innen: Man könnte den tds eine fixe Höhe von 3em oder so geben. Dann würde height:100% am Button funktionieren. Das Padding am Button und der ID-Zelle sollte man dann weglassen.

Lösung von innen nach au0en: Dass die Buttons nicht hoch genug sind, liegt an der ID-Spalte. Da ist padding:1em gesetzt. Ja, für die Buttons auch, ABER Buttons haben per Default einen Font, der etwas kleiner ist als der Normalfont. Weshalb 1em dort weniger ist als in der ID-Spalte. Gib den Buttons font: inherit. Dann sind Texte UND Padding gleich groß und die Buttons so hoch wie die Zelle. Sobald Du allerdings zweizeilige Zellinhalte hast, geht das wieder schief. Good Lack, wie die Maler sagen!

Beides ist machbar. Bei einer riesigen Tabelle ist die Lösung "von außen nach innen" vermutlich performanter, weil der Browser nicht lange überlegen muss, wie hoch die Zellen sind. Ansonsten ist aus meiner Sicht beides gleich gut.

Rolf