Usando posição relativa / absoluta dentro de um DT?

108

Eu tenho o seguinte código:

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

Isso não funciona de jeito nenhum. Por algum motivo, o comando position: relative não está sendo lido no TD e o aviso DIV está sendo colocado fora do contêiner na parte inferior da minha página. Tentei colocar todo o conteúdo do TD em um DIV, como:

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

No entanto, isso cria um novo problema. Como a altura do conteúdo da célula da tabela é variável, o aviso DIV nem sempre está na parte inferior da célula. Se uma célula da tabela se estende além do marcador de 60px, mas nenhuma das outras células o faz, então, nas outras células, o aviso DIV está em 60px para baixo, em vez de na parte inferior.

html position html-table Jason Axelrod
fonte
Existe um motivo para usar a mesa? Estou assumindo que o restante do conteúdo da tabela mudará o conteúdo desta célula. Se a tabela for necessária, você pode usar duas linhas superior com valign = superior e inferior com valign = inferior
Wayne
Se você estiver usando tabelas para fins de layout, não aconselho isso. Usar tabelas para mostrar dados é bom, mas elas não são as melhores para layout.
Kyle
5
É para um calendário ... então uma grade de tabela é essencial: 8wayrun.com/events/monthly/1.2011
Jason Axelrod

Respostas:

189

Isso ocorre porque, de acordo com o CSS 2.1 , o efeito de position: relativenos elementos da tabela é indefinido. Ilustrativo disso, position: relativetem o efeito desejado no Chrome 13, mas não no Firefox 4. Sua solução aqui é adicionar um em divtorno de seu conteúdo e colocar oposition: relative em que divem vez do td. O seguinte ilustra os resultados que você obtém com position: relative(1) em um ( divbom), (2) em um td(não é bom) e, finalmente, (3) em divum td(bom novamente).

No Firefox 4

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

avernet
fonte
29
A altura div não será 100%, então o posicionamento relativo na parte inferior: 0 não tem efeito.
Softlion
1
Observe que a "amplitude absoluta" neste exemplo não afetará a altura td, o que basicamente torna o uso da tabela inútil.
Dror de
@Softlion: Que tal envolver todo o conteúdo de tddentro de a div, definir como width: 100%e height: 100%, aplicar qualquer preenchimento do td ao div e definir como relative? A ideia é criar uma fina camada de conteúdo logo acima do td, que atua como o tdpróprio, mas é um div. Funcionou para mim
CamilB
1
O link para o código-fonte HTML está morto. Você poderia atualizá-lo / atualizá-lo?
Peter VARGA,
1
Para aqueles que acham esta resposta em 2019 ou mais tarde: enquanto CSS2.1 realmente disse que o efeito da position:relativesobre partes da tabela internos foi indefinido, isso significava comportamento das próprias partes da tabela (por exemplo, não ficou claro como deve ser as fronteiras do tdcomportam se for deslocado via position:relativeem caso de border-collapse:collapse). Isso não os excluiu de possíveis blocos contendo os descendentes absolutamente posicionados. Portanto, o comportamento do Firefox acabou por ser apenas um bug, que foi corrigido em 2014.
Ilya Streltsyn
5

Este truque também é adequado, mas neste caso as propriedades de alinhamento (meio, fundo, etc.) não funcionarão.

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

O conteúdo da célula da tabela, com altura variável, pode ser superior a 60 px;

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

Xavier Deva Arul
fonte
1

Com relação à sua segunda tentativa, você tentou usar o alinhamento vertical? Ou

<td valign="bottom">

ou com css

vertical-align:bottom
Kyle
fonte
Isso não funcionaria ... se eu fizesse isso, o conteúdo da célula da tabela seria espaçado 60px da parte inferior; em vez de no topo.
Jason Axelrod
-2

também funciona se você fizer um "display: block;" no td, destruindo a identidade do td, mas funciona!

daigorocub
fonte