Ich habe eine Tabellenzeile, die 3 td s enthält. In der Mitte td gibt es Text, also hat er eine bestimmte Höhe, z.B. 100px.
Die beiden td s links und rechts enthalten jeweils eine Tabelle, die einen (später) anklickbaren Bereich anzeigt, der die gleiche Höhe wie der mittlere td haben soll - also 100px in meinem Beispiel.
Leider streckt nur Firefox den linken und rechten td s auf 100% Höhe. Chrome, Safari und IE legen sie einfach auf Miniumhöhe.
Hier ist die Geige: Ссылка
Ich habe mit der Eigenschaft display herumgespielt, aber es hat nicht geholfen. Bezieht sich die Höhe von 100% nicht auf das übergeordnete Element und wenn ja, warum wird die td s nicht auf die 100% Höhe des übergeordneten Elements erweitert?
Das in dein leeres <td></td> sollte helfen.
Ich habe deinen Code komplett umgeschrieben, weil du dort viele nutzlose Tags hast, das sollte funktionieren:
%Vor% Wie Sie sehen, gebe ich anstelle von leerem <td> s nur eins mit dem Argument colspan="3" spread one td vollständig in drei Spalten ein.
Hier ist eine Demo: jsbin LINK
Beachten Sie, dass ich border-radius und border css nicht wie Sie verwendet habe, um den Code so kurz wie möglich zu halten, damit Sie sich ein Bild machen können.
gibt es nicht so etwas wie height: 100%.
Ein Element kann niemals seine Elternhöhe füllen, indem es height: 100% übergibt, die Lösungen zum Hinzufügen von oder table {empty-cells: show;} sollten den Trick machen, aber ohne eine bestimmte Höhe erhält man nie den gewünschten Effekt.
Ein weiterer Trick besteht darin, das Pseudoelement :after zu verwenden:
Dies sollte in jedem Browser funktionieren (getestet in Chrome unter Windows 7) und speichert eine Menge von und trennt eine bessere Darstellung von der Logik.
Der beste Weg wäre, den CSS-Weg zu benutzen.
%Vor% Der Weg ist ein guter Weg, aber es ist ein bisschen wie ein Hack.
Ist es in Ordnung, jQuery in Ihrer Lösung zu verwenden? Wenn dies der Fall ist, könnten Sie Folgendes in eine Funktion einfügen und sie beim Laden aufrufen, und zwar immer dann, wenn die Tabelle die Größe ändert (wenn sie die Größe ändert)
%Vor% Ich frage mich auch, ob die Verwendung von Tabellen der beste Ansatz für Ihr Ziel ist? Gibt es einen Grund dafür oder könnte es möglich sein, stattdessen <div> elements zu verwenden?
Arbeitsdemo: Ссылка
Ich fand diese Antwort in einem anderen Thread und es hat funktioniert. Auf diese Weise müssen keine zusätzlichen Leerzeichen für leere Zellen eingefügt werden.
%Vor%Tags und Links css cross-browser