Verwenden von Position Relative / Absolute innerhalb eines TD?

108

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
Gibt es einen Grund für die Verwendung der Tabelle? Ich gehe davon aus, dass der Rest des Tabelleninhalts den Inhalt dieser Zelle verschieben wird. Wenn die Tabelle erforderlich ist, können Sie zwei Zeilen oben mit valign = oben und unten mit valign = unten verwenden
Wayne
Wenn Sie Tabellen für Layoutzwecke verwenden, würde ich davon abraten. Die Verwendung von Tabellen zum Anzeigen von Daten ist in Ordnung, eignet sich jedoch nicht für das Layout.
Kyle
5
Es ist für einen Kalender ... also ist ein Tabellenraster unerlässlich: 8wayrun.com/events/monthly/1.2011
Jason Axelrod

Antworten:

189

Dies liegt daran, dass gemäß CSS 2.1 die Auswirkung position: relativeauf Tabellenelemente undefiniert ist. Beispielhaft für diese, position: relativehat die gewünschte Wirkung auf Chrome 13, aber nicht auf Firefox 4. hier Ihre Lösung ist ein hinzuzufügen , divum den Inhalt und die setzen position: relativeauf , dass divstatt der td. Das Folgende zeigt die Ergebnisse, die Sie mit position: relative(1) auf einem divGut), (2) auf einem td(kein Gut) und schließlich (3) auf einem divInneren a erhaltentd (wieder gut) erhalten.

Auf Firefox 4

<table>
  <tr>
    <td>
      <div style="position:relative;">
        <span style="position:absolute; left:150px;">
          Absolute span
        </span>
        Relative div
      </div>
    </td>
  </tr>
</table>
Erweitern Sie das Snippet

Avernet
quelle
29
Die Div-Höhe beträgt nicht 100%, daher hat die relative Positionierung nach unten: 0 keine Auswirkung.
Softlion
1
Beachten Sie, dass die "Absolute Spanne" in diesem Beispiel keinen Einfluss auf die td-Höhe hat, wodurch die Verwendung der Tabelle grundsätzlich unbrauchbar wird.
Dror
@Softlion: Wie wäre es, den gesamten Inhalt des tdInneren von a zu verpacken div, auf width: 100%und zu setzen height: 100%, die Polsterung von td auf div anzuwenden und auf zu setzen relative? Die Idee ist, eine dünne enthaltende Schicht direkt über der zu erstellen td, die sich wie die tdselbst verhält, aber es ist eine div. Es hat bei mir funktioniert.
CamilB
1
Der Link für die HTML-Quelle ist tot. Könnten Sie es aktualisieren / aktualisieren?
Peter VARGA
1
Für diejenigen, die diese Antwort 2019 oder später finden: Während CSS2.1 wirklich sagte, dass die Auswirkung position:relativeauf interne Tabellenteile undefiniert war, bedeutete dies das Verhalten von Tabellenteilen selbst (zum Beispiel war unklar, wie sich die Grenzen des tdVerhaltens verhalten sollten wenn es position:relativeim Falle von border-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.
Ilya Streltsyn
5

Dieser Trick ist auch geeignet, aber in diesem Fall funktionieren die Ausrichtungseigenschaften (Mitte, unten usw.) nicht.

<td style="display: block; position: relative;">
</td>
Sergey Onishchenko
quelle
2

Der Inhalt der Tabellenzelle mit variabler Höhe kann mehr als 60 Pixel betragen.

<div style="position: absolute; bottom: 0px;">
    Notice
</div>

Xavier Deva Arul
quelle
1

Haben Sie bei Ihrem zweiten Versuch versucht, die vertikale Ausrichtung zu verwenden? Entweder

<td valign="bottom">

oder mit css

vertical-align:bottom
Kyle
quelle
Das würde nicht funktionieren ... wenn ich das tun würde, würde der Inhalt der Tabellenzelle 60 Pixel von unten entfernt sein; statt oben.
Jason Axelrod
-2

funktioniert auch, wenn Sie einen "display: block;" auf dem td, die td identität zerstören, funktioniert aber!

Daigorocub
quelle