Korzystanie z pozycji względnej / bezwzględnej w TD?

108

Mam następujący kod:

<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>

To w ogóle nie działa. Z jakiegoś powodu polecenie position: Relative nie jest odczytywane w TD, a informacja DIV jest umieszczana poza kontenerem treści na dole mojej strony. Próbowałem umieścić całą zawartość TD w DIV, na przykład:

<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>

Stwarza to jednak nowy problem. Ponieważ wysokość zawartości komórki tabeli jest zmienna, informacja DIV nie zawsze znajduje się na dole komórki. Jeśli komórka tabeli rozciąga się poza znacznik 60 pikseli, ale żadna z pozostałych komórek nie rozciąga się, to w innych komórkach informacja DIV jest o 60 pikseli niższa, a nie u dołu.

html position html-table Jason Axelrod
źródło
Czy jest powód do korzystania ze stołu? Zakładam, że reszta zawartości tabeli spowoduje przesunięcie zawartości tej komórki. Jeśli tabela jest konieczna, możesz użyć dwóch rzędów góra z valign = góra i dół z valign = dół
Wayne
Jeśli używasz tabel do celów układu, odradzam to. Używanie tabel do wyświetlania danych jest w porządku, ale nie nadają się najlepiej do układu.
Kyle
5
To na kalendarz ... więc siatka tabel jest niezbędna: 8wayrun.com/events/monthly/1.2011
Jason Axelrod

Odpowiedzi:

189

Dzieje się tak, ponieważ zgodnie z CSS 2.1 wpływ position: relativena elementy tabeli jest niezdefiniowany. Ilustrując to, position: relativema pożądany wpływ na Chrome 13, ale nie na Firefox 4. Twoim rozwiązaniem jest tutaj dodanie znaku divwokół treści i umieszczenie position: relativena nim divzamiast td. Poniższy rysunek ilustruje wyniki, które uzyskasz z position: relative(1) na divdobrym), (2) na td(niedobrym) i wreszcie (3) na divwewnętrznym a td(znowu dobry).

W przeglądarce Firefox 4

<table>
  <tr>
    <td>
      <div style="position:relative;">
        <span style="position:absolute; left:150px;">
          Absolute span
        </span>
        Relative div
      </div>
    </td>
  </tr>
</table>
Rozwiń fragment

avernet
źródło
29
Wysokość div nie będzie wynosić 100%, więc pozycjonowanie względne do dołu: 0 nie ma żadnego wpływu.
Softlion
1
Zauważ, że „Bezwzględna rozpiętość” w tym przykładzie nie wpłynie na wysokość td, co w zasadzie sprawia, że ​​użycie tabeli jest bezużyteczne.
Dror
@Softlion: Co powiesz na zawinięcie całej zawartości tdwewnątrz a div, ustaw na width: 100%i height: 100%, zastosuj wypełnienie od td do div i ustaw je na relative? Pomysł polega na utworzeniu cienkiej warstwy zawierającej tuż nad elementem td, który zachowuje się jak tdsam, ale jest plikiem div. U mnie to zadziałało.
CamilB
1
Link do źródła HTML jest martwy. Czy możesz go zaktualizować / odświeżyć?
Peter VARGA
1
Dla tych, którzy znaleźli tę odpowiedź w 2019 roku lub później: chociaż CSS2.1 naprawdę powiedział, że wpływ position:relativena wewnętrzne części tabeli był niezdefiniowany, oznaczało to zachowanie samych części tabeli (na przykład nie było jasne, jak powinny tdzachowywać się granice jeśli jest przesuwany przez position:relativew przypadku border-collapse:collapse). Nie wykluczało ich to z możliwych bloków absolutnie pozycjonowanych potomków. Tak więc zachowanie Firefoksa okazało się tylko błędem, który został naprawiony w 2014 roku.
Ilya Streltsyn
5

Ta sztuczka jest również odpowiednia, ale w tym przypadku właściwości wyrównania (środek, dół itp.) Nie będą działać.

<td style="display: block; position: relative;">
</td>
Siergiej Oniszczenko
źródło
2

Zawartość komórki tabeli o zmiennej wysokości może być większa niż 60 pikseli;

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

Xavier Deva Arul
źródło
1

Jeśli chodzi o twoją drugą próbę, czy próbowałeś użyć wyrównania w pionie? Zarówno

<td valign="bottom">

lub z css

vertical-align:bottom
Kyle
źródło
To by nie zadziałało ... gdybym to zrobił, zawartość komórki tabeli byłaby oddalona o 60 pikseli od dołu; zamiast na górze.
Jason Axelrod
-2

działa również, jeśli wykonasz polecenie "display: block;" w td, niszcząc tożsamość td, ale działa!

daigorocub
źródło