¿Usar posición relativa / absoluta dentro de un TD?

108

Tengo el siguiente 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>

Esto no funciona en absoluto. Por alguna razón, la posición: el comando relativo no se lee en el TD y el aviso DIV se coloca fuera del contenedor de contenido en la parte inferior de mi página. He intentado poner todo el contenido del TD en un 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>

Sin embargo, esto crea un nuevo problema. Dado que la altura del contenido de la celda de la tabla es variable, el aviso DIV no siempre está en la parte inferior de la celda. Si una celda de la tabla se extiende más allá del marcador de 60px, pero ninguna de las otras celdas lo hace, entonces, en las otras celdas, el aviso DIV está en 60px hacia abajo, en lugar de hacia abajo.

html position html-table Jason Axelrod
fuente
¿Hay alguna razón para usar la mesa? Supongo que el resto del contenido de la tabla cambiará el contenido de esta celda. Si la tabla es necesaria, puede usar dos filas arriba con valign = top y bottom con valign = bottom
Wayne
Si está utilizando tablas para fines de diseño, no lo desaconsejaría. Usar tablas para mostrar datos está bien, pero no son las mejores para el diseño.
Kyle
5
Es para un calendario ... por lo que una cuadrícula de tabla es esencial: 8wayrun.com/events/monthly/1.2011
Jason Axelrod

Respuestas:

189

Esto se debe a que, según CSS 2.1 , el efecto de position: relativesobre los elementos de la tabla no está definido. Ilustrativo de esto, position: relativetiene el efecto deseado en Chrome 13, pero no en Firefox 4. Su solución aquí es agregar un divalrededor de su contenido y ponerlo position: relativeen divlugar de td. A continuación se ilustran los resultados que obtiene con position: relative(1) en un divbien), (2) en un td(nada bueno) y finalmente (3) en un divinterior a td(bueno de nuevo).

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

avernet
fuente
29
La altura del div no será del 100%, por lo que el posicionamiento relativo a la parte inferior: 0 no tiene ningún efecto.
Softlion
1
Tenga en cuenta que el "intervalo absoluto" en este ejemplo no afectará la altura td, lo que básicamente hace que el uso de la tabla sea inútil.
Dror
@Softlion: ¿Qué tal si envuelve todo el contenido del tdinterior a div, establece en width: 100%y height: 100%, aplica cualquier relleno del td al div, y configúralo en relative? La idea es crear una capa de contención delgada justo encima del td, que actúa como el tdmismo, pero es un div. Funcionó para mí.
CamilB
1
El enlace de la fuente HTML está inactivo. ¿Podrías actualizarlo?
Peter VARGA
1
Para aquellos que encuentran esta respuesta en 2019 o más tarde: si bien CSS2.1 realmente dijo que el efecto de position:relativeen las partes internas de la tabla no estaba definido, significaba el comportamiento de las partes de la tabla en sí mismas (por ejemplo, no estaba claro cómo deberían tdcomportarse los bordes del si se cambia a través position:relativeen caso de border-collapse:collapse). No los excluyó de los posibles bloques contenedores de los descendientes absolutamente posicionados. Entonces, el comportamiento de Firefox resultó ser solo un error, que se corrigió en 2014.
Ilya Streltsyn
5

Este truco también es adecuado, pero en este caso las propiedades de alineación (centro, fondo, etc.) no funcionarán.

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

El contenido de la celda de la tabla, altura variable, puede ser superior a 60 px;

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

Xavier Deva Arul
fuente
1

Con respecto a su segundo intento, ¿intentó usar la alineación vertical? Ya sea

<td valign="bottom">

o con css

vertical-align:bottom
Kyle
fuente
Eso no funcionaría ... si hiciera eso, entonces el contenido de la celda de la tabla estaría espaciado 60px desde la parte inferior; en lugar de en la parte superior.
Jason Axelrod
-2

también funciona si haces un "display: block;" en el td, destruyendo la identidad del td, ¡pero funciona!

daigorocub
fuente