Ich habe folgenden Code:
<td style="position: relative; min-height: 60px; vertical-align: top;">
Contents of table cell, variable height, could be more than 60px;
<div style="position: absolute; bottom: 0px;">
Notice
</div>
</td>
Das funktioniert überhaupt nicht. Aus irgendeinem Grund wird der Befehl position: relative auf dem TD nicht gelesen und der Hinweis DIV wird außerhalb des Inhaltscontainers am Ende meiner Seite platziert. Ich habe versucht, den gesamten Inhalt des TD in einen DIV zu integrieren, wie zum Beispiel:
<td>
<div style="position: relative; min-height: 60px; vertical-align: top;">
Contents of table cell, variable height, could be more than 60px;
<div style="position: absolute; bottom: 0px;">
Notice
</div>
</div>
</td>
Dies schafft jedoch ein neues Problem. Da die Höhe des Inhalts der Tabellenzelle variabel ist, befindet sich der Hinweis DIV nicht immer am unteren Rand der Zelle. Wenn sich eine Tabellenzelle über den 60-Pixel-Marker hinaus erstreckt, aber keine der anderen Zellen dies tut, befindet sich in den anderen Zellen der Hinweis DIV bei 60 Pixel nach unten und nicht unten.
html
position
html-table
Jason Axelrod
quelle
quelle
Antworten:
Dies liegt daran, dass gemäß CSS 2.1 die Auswirkung
position: relative
auf Tabellenelemente undefiniert ist. Beispielhaft für diese,position: relative
hat die gewünschte Wirkung auf Chrome 13, aber nicht auf Firefox 4. hier Ihre Lösung ist ein hinzuzufügen ,div
um den Inhalt und die setzenposition: relative
auf , dassdiv
statt dertd
. Das Folgende zeigt die Ergebnisse, die Sie mitposition: relative
(1) auf einemdiv
Gut), (2) auf einemtd
(kein Gut) und schließlich (3) auf einemdiv
Inneren a erhaltentd
(wieder gut) erhalten.quelle
td
Inneren von a zu verpackendiv
, aufwidth: 100%
und zu setzenheight: 100%
, die Polsterung von td auf div anzuwenden und auf zu setzenrelative
? Die Idee ist, eine dünne enthaltende Schicht direkt über der zu erstellentd
, die sich wie dietd
selbst verhält, aber es ist einediv
. Es hat bei mir funktioniert.position:relative
auf interne Tabellenteile undefiniert war, bedeutete dies das Verhalten von Tabellenteilen selbst (zum Beispiel war unklar, wie sich die Grenzen destd
Verhaltens verhalten sollten wenn esposition:relative
im Falle vonborder-collapse:collapse
) verschoben wird . Es schloss sie nicht von möglichen Blöcken der absolut positionierten Nachkommen aus. Das Verhalten von Firefox stellte sich also nur als Fehler heraus, der 2014 behoben wurde.Dieser Trick ist auch geeignet, aber in diesem Fall funktionieren die Ausrichtungseigenschaften (Mitte, unten usw.) nicht.
quelle
Der Inhalt der Tabellenzelle mit variabler Höhe kann mehr als 60 Pixel betragen.
quelle
Haben Sie bei Ihrem zweiten Versuch versucht, die vertikale Ausrichtung zu verwenden? Entweder
oder mit css
quelle
funktioniert auch, wenn Sie einen "display: block;" auf dem td, die td identität zerstören, funktioniert aber!
quelle