Usare la posizione relativa / assoluta all'interno di un TD?

108

Ho il codice seguente:

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

Questo non funziona affatto. Per qualche motivo, la posizione: comando relativo non viene letto sul TD e l'avviso DIV viene posizionato all'esterno del contenitore dei contenuti in fondo alla mia pagina. Ho provato a mettere tutto il contenuto del TD in un DIV come:

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

Tuttavia, questo crea un nuovo problema. Poiché l'altezza del contenuto della cella della tabella è variabile, l'avviso DIV non è sempre nella parte inferiore della cella. Se una cella della tabella si estende oltre l'indicatore di 60 px, ma nessuna delle altre celle lo fa, nelle altre celle l'avviso DIV si trova a 60 px in basso, invece che in fondo.

html position html-table

— Jason Axelrod
fonte

C'è un motivo per usare il tavolo? Suppongo che il resto del contenuto della tabella sposterà il contenuto di questa cella. Se la tabella è necessaria puoi usare due righe in alto con valign = top e bottom con valign = bottom

— Wayne

Se stai usando le tabelle per scopi di layout, ti sconsiglio di farlo. Usare le tabelle per mostrare i dati va bene, ma non sono le migliori per il layout.

— Kyle

5

È per un calendario ... quindi una griglia da tavolo è essenziale: 8wayrun.com/events/monthly/1.2011

— Jason Axelrod

189

Questo perché secondo CSS 2.1 , l'effetto di position: relativesugli elementi della tabella non è definito. A titolo illustrativo, position: relativeha l'effetto desiderato su Chrome 13, ma non su Firefox 4. La tua soluzione qui è aggiungere un divintorno al tuo contenuto e mettere position: relativesu quello divinvece del td. Di seguito vengono illustrati i risultati che si ottengono con position: relative(1) su un divbuono), (2) su un td(non buono) e infine (3) su un divinterno a td(di nuovo buono).

In Firefox 4

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

Espandi lo snippet

— avernet
fonte

29

L'altezza del div non sarà del 100%, quindi il posizionamento relativo al fondo: 0 non ha alcun effetto.

— Softlion

1

Si noti che l '"intervallo assoluto" in questo esempio non influirà sull'altezza td che sostanzialmente rende inutile l'uso della tabella.

— Dror

@ Softlion: Che ne dici di avvolgere l'intero contenuto dell'interno di tda div, impostare su width: 100%e height: 100%, applicare qualsiasi riempimento da td al div e impostarlo su relative? L'idea è di creare un sottile strato di contenimento appena sopra td, che si comporta come tdse stesso, ma è un file div. Ha funzionato per me.

— CamilB

1

Il collegamento per il sorgente HTML è morto. Potresti aggiornarlo / rinfrescarlo?

— Peter VARGA

1

Per coloro che trovano questa risposta nel 2019 o successivamente: mentre CSS2.1 diceva davvero che l'effetto di position:relativesulle parti interne della tabella era indefinito, significava il comportamento delle parti della tabella stesse (ad esempio, non era chiaro come dovrebbero tdcomportarsi i bordi del se è spostato tramite position:relativein caso di border-collapse:collapse). Non li escludeva da eventuali blocchi di contenimento dei discendenti assolutamente posizionati. Quindi il comportamento di Firefox si è rivelato essere solo un bug, che è stato corretto nel 2014.

— Ilya Streltsyn

5

Anche questo trucco è adatto, ma in questo caso le proprietà di allineamento (centrale, inferiore ecc.) Non funzioneranno.

<td style="display: block; position: relative;">
</td>

— Sergey Onishchenko
fonte

2

Il contenuto della cella della tabella, altezza variabile, potrebbe essere superiore a 60px;

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

— Xavier Deva Arul
fonte

1

Per quanto riguarda il tuo secondo tentativo, hai provato a utilizzare l'allineamento verticale? O

<td valign="bottom">

o con css

vertical-align:bottom

— Kyle
fonte

Non funzionerebbe ... se lo facessi, il contenuto della cella della tabella sarebbe spaziato di 60px dal fondo; invece che in alto.

— Jason Axelrod

-2

funziona anche se fai un "display: block;" sul td, distruggendo l'identità del td, ma funziona!

— daigorocub
fonte